子元素最高为父级的 flex:1 ，超出则滚动

有时候会遇到如下情况：

1. 上、中、下布局，上下固定高度，中间自适应，中间的内容超过则产生滚动。
2. 上、下（左右）布局，上固定高度，下占据剩余部分（左侧不产生滚动，右侧内容过多则产生滚动）。

1. 上中下

<div class="parent">
  <div class="top"></div>
  <div class="child">
    <p>很多很多内容……</p>
    <p>很多很多内容……</p>
    <p>很多很多内容……</p>
    <p>很多很多内容……</p>
    <p>很多很多内容……</p>
    <p>很多很多内容……</p>
    <p>很多很多内容……</p>
    <p>很多很多内容……</p>
    <p>很多很多内容……</p>
    <p>很多很多内容……</p>
    <p>很多很多内容……</p>
    <p>很多很多内容……</p>
    <p>很多很多内容……</p>
    <p>很多很多内容……</p>
    <p>很多很多内容……</p>
    <p>很多很多内容……</p>
    <p>很多很多内容……</p>
    <p>很多很多内容……</p>
    <p>很多很多内容……</p>
    <p>很多很多内容……</p>
    <p>很多很多内容……</p>
    <p>很多很多内容……</p>
    <p>很多很多内容……</p>
    <p>很多很多内容……</p>
  </div>
</div>

.parent {
  display: flex;
  flex-direction: column; /* 或 row，看你的布局 */
  height: 400px; /* 父级必须有高度约束 */
  border: 1px solid #333;
}

.top{
  height:200px;
  background:#333;
}

.child {
  flex: 1;            /* 占满父级剩余空间 */
  min-height: 0;      /* 🚨关键！避免 flex 子项默认撑开 */
  overflow: auto;     /* 内容超出时滚动 */
}

预览

https://jsbin.com/pezebik/edit?html,css,output

2. 上、下（左右）

<div class="parent">
  <div class="top"></div>
  <div class="content">
    <div class="side"></div>
    <div class="child">
      <p>很多很多内容……</p>
      <p>很多很多内容……</p>
      <p>很多很多内容……</p>
      <p>很多很多内容……</p>
      <p>很多很多内容……</p>
      <p>很多很多内容……</p>
      <p>很多很多内容……</p>
      <p>很多很多内容……</p>
      <p>很多很多内容……</p>
      <p>很多很多内容……</p>
      <p>很多很多内容……</p>
      <p>很多很多内容……</p>
      <p>很多很多内容……</p>
      <p>很多很多内容……</p>
      <p>很多很多内容……</p>
      <p>很多很多内容……</p>
      <p>很多很多内容……</p>
      <p>很多很多内容……</p>
      <p>很多很多内容……</p>
      <p>很多很多内容……</p>
      <p>很多很多内容……</p>
      <p>很多很多内容……</p>
      <p>很多很多内容……</p>
      <p>很多很多内容……</p>
    </div>
  </div>
</div>

.parent {
  display: flex;
  flex-direction: column; /* 或 row，看你的布局 */
  height: 600px; /* 父级必须有高度约束 */
  border: 1px solid #333;
}

.top{
  height:200px;
  background:#333;
}

.content{
  display:flex;
  flex:1;
  min-height:0;
}

.side{
  width:100px;
  background-color:#999;
}

.child {
  flex: 1;            /* 占满父级剩余空间 */
  min-height: 0;      /* 🚨关键！避免 flex 子项默认撑开 */
  overflow: auto;     /* 内容超出时滚动 */
}

预览

https://jsbin.com/hafelak/edit?html,css,output