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

有时候会遇到如下情况：

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

1. 上中下

html

<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 class="bottom"></div>
</div>

css

.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;     /* 内容超出时滚动 */
}

.bottom{
  height:100px;
  background:#999;
}

预览

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

2. 上、下（左右）

html

<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>

css

.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

父级嵌套

在 Flex 布局 里，如果父级和祖先都只是 flex: 1，但是没有明确的高度约束（比如 height: 100%、min-height 或者 max-height），那么它们的高度是“自适应内容”的，也就是说会一直被内容撑开，这样子孙元素的 max-height: 100% 就失效了，因为父容器高度是“无限的”。

要解决这个问题，需要 建立高度约束链，也就是从根节点（html, body，或者某个容器）开始，明确规定高度，才能让 flex: 1 真正分配空间。

✅ 解决方案：

根容器设定高度约束

css

html, body {
  height: 100%;
  margin: 0;
}

父级建立 flex 高度约束

css

.root {
  display: flex;
  flex-direction: column;
  height: 100%;   /* 必须有约束 */
}

子级 flex 分配

css

.parent {
  flex: 1;             /* 在剩余空间内分配 */
  display: flex;
  flex-direction: column;
  min-height: 0;       /* 防止子元素高度无限撑开 */
}

目标元素滚动控制

css

.child {
  flex: 1;
  min-height: 0;       /* 关键：避免子元素高度无限增长 */
  overflow: auto;      /* 超出时滚动 */
}

⚡核心技巧：

min-height: 0 / min-width: 0 在 flex 布局里很重要，否则子元素可能会忽略父级的高度限制，一直撑开。
如果父级没有高度约束 → 就必须给上层容器（或 html, body）一个高度，否则没法实现滚动。
默认行为：Flex/Grid 项目的 min-width: auto 会强制元素宽度至少等于其内容宽度。
使用目的：通过 min-width: 0 强制让元素的可收缩性优先于其内容的原始宽度，是实现响应式布局和长文本省略的必备技巧。

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

1. 上中下 ​

预览 ​

2. 上、下（左右） ​