含绝对定位元素时Flex子元素无法填满可滚动父容器

问题描述 #

父容器采用flex布局，设置了position: relative和overflow-y: scroll，内部包含一个绝对定位子元素和一个静态定位子元素。为容纳超出的绝对定位元素，父容器出现滚动条，但静态子元素即使设置了flex: 1或height: 100%，也只能覆盖容器的可视高度，滚动后无法填满整个可滚动区域。

原因分析 #

绝对定位元素脱离文档流，不参与flex布局的高度计算。父容器的滚动高度由绝对元素的尺寸和定位（top:50px+height:200px）决定，但flex布局下的静态子元素，高度仅基于父容器的固定可视高度（即设置的height:150px）计算，而非滚动后的实际内容高度，因此无法跟随滚动区域扩展。

解决方案 #

方案1：用伪元素撑开flex容器内容高度 #

给父容器添加不可见的伪元素，让它参与flex布局，占据和绝对定位元素相同的高度，使flex容器内容高度被撑开，静态子元素的flex:1就能基于完整高度计算：

.parent::before {
  content: '';
  /* 计算绝对元素占用的总高度：top值 + 自身高度 */
  height: calc(50px + 200px);
  visibility: hidden;
}

完整代码：

.parent {
  position: relative;
  display: flex;
  height: 150px;
  flex-direction: column;
  background-color: rgb(0 0 0 / 5%);
  outline: 1px solid rgb(0 0 0);
  overflow-y: scroll;
}

.parent::before {
  content: '';
  height: calc(50px + 200px);
  visibility: hidden;
}

.absolute-child {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 200px;
  height: 200px;
  background-color: rgb(255 0 0 / 25%);
  outline: 1px solid rgb(255 0 0);
}

.static-child {
  flex: 1;
  background-color: rgb(0 128 0 / 25%);
  outline: 1px solid rgb(0 128 0);
}

<div class="parent">
  <div class="absolute-child">Absolute child. You'll have to scroll to see the full me.</div>
  <div class="static-child">Static child. Now I fill the entire scrollable area when you scroll.</div>
</div>

方案2：将绝对定位元素嵌套进静态子元素 #

如果布局允许，把绝对定位元素放在静态子元素内部，静态子元素会跟随父容器的滚动高度自动扩展，同时绝对元素仍能基于父容器定位（因为父容器是relative）：

修改后的HTML：

<div class="parent">
  <div class="static-child">
    Static child. Now I fill the entire scrollable area when you scroll.
    <div class="absolute-child">Absolute child. You'll have to scroll to see the full me.</div>
  </div>
</div>

CSS无需修改，静态子元素会自动填满整个滚动区域。

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