css完成高度的自适应

Question

class Demo extends React.Component {

  state = {
    list: []
  }

  handleAdd = () => {
    const { list } = this.state;
    this.setState({ list: [...list, list.length] })
  }
  
  render() {
    const { list } = this.state
    return (
      <div className={styles.container}>
        <div className={styles.top}>
          <Button type="primary" onClick={this.handleAdd}>增加</Button>
        </div>
        <div className={styles.middle}>
          {
            list.map(item => <p className={styles.item}>{item}</p>)
          }
        </div>
        <div className={styles.bottom} />
      </div>
    );
  }
}

.container {
  display: flex;
  flex-direction: column;
  .top {
    width: 100px;
    height: 100px;
    background: lightcoral;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .bottom {
    width: 100px;
    height: 100px;
    background: lightblue;
  }
  .middle {
    flex: 1;
  }
  .item {
    width: 80px;
    height: 40px;
    margin: 5px;
    background: lightgreen;
  }
}

• 中间绿色的部分，不足高度时，就是自己的高度。
• 中间绿色部分超出高度时，有最大高度，可滚动。
• 绿色的最大高度时浏览器的高度减去顶部和底部，不同浏览器可能不同。
• 不希望通过js获取元素高度，css能否搞定？

Answer 1

为中间部分添加

max-height:calc(100% - top高度 - 底部高度);

Answer 2

中间做个绝对定位后，溢出滚动就行

Answer 3

• 中间绿色的部分，不足高度时，就是自己的高度。

此时高度计算依据子元素

• 中间绿色部分超出高度时，有最大高度，可滚动。

此时高度计算依据父元素

如果container容器高度计算依据父元素，且顶部和底部的高度是固定的，则还可以尝试利用max-height: 100% + flex: 1 1 auto试试。
但是

绿色的最大高度时浏览器的高度减去顶部和底部，不同浏览器可能不同

囧~~

Answer 4

container加一个最大高度高度 max-height: 100vh
middle加一个滚动 overflow: auto

Answer 5

顶部和底部固定高度的话，可以用flex。