CSS Flex：垂直Flex布局中子元素的滚动高度实现方案

问题场景 #

容器A为flex-direction: column的Flex容器，固定高度；子元素B高度随动态内容变化；子元素C通过flex-grow: 1填充A的剩余高度。需要让C内部的子元素D占满C的全部高度，且当D内容过多时能垂直滚动。

原代码示例 #

div {
  padding: 0.5rem;
  border: 1px solid black;
}

#A {
  position: relative;
  height: 200px;
  display: flex;
  flex-direction: column;
  background-color: #DAE8FC;
  padding: 1rem;
  gap: 1rem;
}

#B {
  background-color: #D5E8D4;
}

#C {
  position: relative;
  flex-grow: 1;
  background-color: #FEF2CC;
}

#D {
  overflow-y: scroll;
  background-color: #ffffff;
}

<!-- Content is editable to vary the content height easily -->
<div id="A" contenteditable>
  <div id="B">
    Content Of B
  </div>
  <div id="C">
    Content Of C
    <div id="D">
      Content Of D<br>
      Content Of D<br>
      Content Of D<br>
      Content Of D<br>
      Content Of D<br>
      Content Of D<br>
      Content Of D<br>
      Content Of D<br>
    </div>
  </div>
</div>

解决方案 #

问题核心是：子元素C仅通过flex-grow:1获得剩余高度，但本身无明确高度约束，导致内部D无法确定滚动边界。以下两种方式可解决：

方法一：将C设置为Flex容器

给C添加Flex布局属性，让D通过flex-grow:1填充剩余空间：

#C {
  position: relative;
  flex-grow: 1;
  background-color: #FEF2CC;
  /* 新增Flex容器属性 */
  display: flex;
  flex-direction: column;
}

#D {
  overflow-y: scroll;
  background-color: #ffffff;
  /* 让D填充C的剩余高度 */
  flex-grow: 1;
}

方法二：给C设置高度约束，让D继承高度

通过height:0强制C的高度由Flex布局控制，再让D继承C的高度：

#C {
  position: relative;
  flex-grow: 1;
  background-color: #FEF2CC;
  /* 新增高度约束 */
  height: 0;
}

#D {
  overflow-y: scroll;
  background-color: #ffffff;
  /* 继承C的高度 */
  height: 100%;
}

原理说明 #

• 方法一中，C作为Flex容器后，D可通过flex-grow:1自动填充剩余空间，内容超出时overflow-y:scroll触发滚动。
• 方法二中，height:0避免C被内部内容撑开，确保其高度由flex-grow控制，此时D的height:100%能正确继承高度，实现滚动效果。

内容的提问来源于stack exchange，提问作者duncanhall