如何让flex子项占满溢出容器高度并实现自定义列宽规则

解决方案 #

1. 列宽自适应优化方案 #

无需硬编码固定px宽度，利用flex弹性规则实现需求：

• 非最后一列设置 flex: 0 0 calc(100% / 6)，默认6列等分容器宽度，同时添加 min-width: 100px 保证最小宽度固定
• 最后一列保留弹性适配规则即可，会自动填充剩余宽度，滚动条出现时也会自动扣除滚动条宽度，无需手动计算
  该方案灵活度更高，后续列数调整仅需修改calc中的除数即可。

2. 列高度撑满容器解决方案 #

stretch不生效的核心原因是：flex容器设置overflow: auto后，子项默认仅撑满自身内容高度，不会适配容器的滚动区域高度。仅需做两处修改：

• 新增一层父容器承载滚动逻辑，将原.outer_container的overflow: auto和固定高度移到新增的父容器上
• 给.column添加min-height: 100%，强制列高度撑满flex容器高度

完整修改后CSS代码

.scroll_wrapper {
  width: 100%;
  height: 200px;
  overflow: auto;
  background-color: yellow;
}
.outer_container {
  display: flex;
  min-height: 100%;
  align-items: stretch;
}
.column {
  flex: 0 0 calc(100% / 6);
  min-width: 100px;
  border-left: 1px solid white;
  flex-shrink: 0;
  min-height: 100%;
}
.column.last {
  flex: 1 1 auto;
  min-width: unset;
}
.column_item {
  height: 44px;
  background-color: blue;
  border-top: 1px solid red;
}

完整修改后HTML代码

<div class="scroll_wrapper">
  <div class="outer_container">
    <div class="column">
      <div class="column_item"></div>
      <div class="column_item"></div>
      <div class="column_item"></div>
      <div class="column_item"></div>
      <div class="column_item"></div>
      <div class="column_item"></div>
    </div>
    <div class="column" style="background-color: gray;">
      <div class="column_item"></div>
    </div>
    <div class="column">
      <div class="column_item"></div>
    </div>
    <div class="column">
      <div class="column_item"></div>
    </div>
    <div class="column">
      <div class="column_item"></div>
    </div>
    <div class="column last">
      <div class="column_item"></div>
    </div>
  </div>
</div>

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