如何用Bootstrap Flexbox让子row填充父col剩余空间？

你的问题核心是没搞对Flex容器的排列方向，以及没有给目标元素设置正确的空间占比属性，咱们来一步步修正：

问题根源分析 #

你给父容器加了d-flex，但Bootstrap的d-flex默认是横向排列（flex-direction: row），这会让两个row元素挤在同一行，直接打乱布局；另外align-self-stretch只是让元素在交叉轴方向拉伸，并不是用来占满剩余空间的属性。

修正后的代码 #

<div class="col-12 d-flex flex-column" style="min-height: 100%;">
  <!-- 第一个row：保持自身高度，不被压缩 -->
  <div class="row flex-shrink-0">
    <div class="column-name col">{this.props.name}</div>
  </div>
  <!-- 第二个row：填充父容器剩余空间 -->
  <div class="row flex-grow-1">
    <Lane /> <!-- React组件 -->
  </div>
</div>

关键调整说明 #

• 给父容器添加flex-column类，让子元素垂直排列，这是解决布局错乱的核心
• 第一个row加flex-shrink-0，确保它只占自身内容高度，不会被压缩
• 第二个row加flex-grow-1，让它自动占据父容器中第一个元素剩下的所有空间
• 父容器设置min-height: 100%（或者具体高度值），这样flex-grow-1才有明确的剩余空间可以填充

如果<Lane />组件内部还有嵌套容器，记得给它的根元素加h-100类，让组件内容也能完全填充所在的row空间。

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