Flex容器计算高度时如何排除指定子元素且不设置固定高度

实现思路 #

• 父容器设置position: relative作为定位锚点，同时加overflow: hidden实现超出部分裁剪
• 需要排除高度计算的子元素设置position: absolute脱离正常文档流，父容器计算高度时不会将该元素纳入统计，再根据元素原本的布局位置设置偏移量保证显示位置正确

完整代码示例 #

CSS代码 #

.a {
  display: flex;
  border: 1px solid black;
  /* 新增样式 */
  position: relative;
  overflow: hidden;
}

.b {
  height: 300px;
  width: 50px;
  border: 1px solid green;
  background-color: green;
  /* 新增样式，脱离文档流，不参与父容器高度计算 */
  position: absolute;
  left: 0; /* 保持和原本第一个子元素的位置一致 */
}

.c {
  height: 200px;
  width: 50px;
  border: 1px solid blue;
  background-color: blue;
  /* 第一个子元素脱流，新增左边距避免被绿色块覆盖 */
  margin-left: 52px; /* 对应绿色块的宽度+边框总宽度 */
}

.d {
  height: 250px;
  width: 50px;
  border: 1px solid red;
  background-color: red;
}

HTML代码 #

<div class="a">
  <div class="b">
  </div>
  <div class="c">
  </div>
  <div class="d">
  </div>
</div>

效果说明 #

父容器高度由正常流内最高的红色子元素（250px）决定，绿色子元素高度300px超出的50px部分会被自动裁剪，全程不需要设置固定高度值，完全符合需求。

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