Bootstrap卡片行列内滚动Div自适应父容器高度问题求助

我明白你现在遇到的核心问题：在Bootstrap的row-col网格体系下，既要实现md断点横向排列、sm断点纵向排列的响应式特性，又要让右侧的inner_remaining Div能自适应父容器高度，同时支持动态内容滚动。之前的flex设置没完全适配Bootstrap自带的row-col结构，导致高度传递出现问题。

下面是针对性的解决方案，我们会利用Bootstrap的内置flex类+少量自定义CSS，确保高度在整个嵌套结构中正确传递：

步骤1：调整HTML结构，强化高度传递链 #

首先要确保卡片内部的容器层级都能继承固定高度（卡片的400px），我们需要给.card-body加上flex属性，让它占满卡片的高度，同时让内部的#outer row也占满.card-body的空间：

<div class="container body-content justify-content-center">
  <div class="row">
    <div class="col-sm-12">
      <div class="card" style="color: black; height: 400px">
        <!-- 给card-body添加flex-column和h-100，让它占满卡片高度并垂直排列子元素 -->
        <div class="card-body d-flex flex-column h-100">
          <!-- 给outer row添加flex-grow-1，让它占满card-body的剩余高度，同时用Bootstrap响应式flex类控制排列方向 -->
          <div class="row flex-sm-column flex-md-row h-100" id="outer">
            <div class="col-sm-12 col-md-6" id="inner_fixed">
              I am fixed height<br />
              I am fixed height<br />
              I am fixed height<br />
            </div>
            <div class="col-sm-12 col-md-6 d-flex flex-column" id="inner_remaining">
              <div class="flex-grow-1 overflow-auto">
                I take up the remaining height<br />
                I take up the remaining height<br />
                I take up the remaining height<br />
                I take up the remaining height<br />
                I take up the remaining height<br />
                I take up the remaining height<br />
                I take up the remaining height<br />
                I take up the remaining height<br />
                I take up the remaining height<br />
                I take up the remaining height<br />
                I take up the remaining height<br />
                I take up the remaining height<br />
                I take up the remaining height<br />
                I take up the remaining height<br />
                I take up the remaining height<br />
                I take up the remaining height<br />
                I take up the remaining height<br />
                I take up the remaining height<br />
                I take up the remaining height<br />
                I take up the remaining height<br />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

步骤2：自定义CSS补充 #

我们只需要少量CSS来固定inner_fixed的高度，以及确保滚动容器的样式：

#inner_fixed {
  height: 100px;
  background-color: grey;
}

#inner_remaining {
  background-color: #DDDDDD;
  /* 确保在flex布局中，子元素能正确计算高度 */
  min-height: 0;
}

关键原理说明 #

1. 高度传递链：.card固定400px → .card-body用h-100占满卡片高度，同时d-flex flex-column让子元素垂直排列 → #outer row用flex-grow-1占满.card-body的剩余高度，确保子col有可参考的高度。
2. 响应式排列：用Bootstrap的flex-sm-column flex-md-row直接控制#outer的排列方向，无需自定义媒体查询，更符合Bootstrap的设计逻辑。
3. 滚动容器处理：在inner_remaining内部嵌套一个flex-grow-1 overflow-auto的Div，让它自动填充剩余高度，同时内容溢出时显示滚动条；加上min-height: 0解决flex子元素因内容溢出导致高度计算错误的问题。

这样调整后，不管是sm断点的纵向排列，还是md断点的横向排列，inner_remaining都能完美适配父容器高度，动态内容超出时自动滚动，同时完全兼容Bootstrap的row-col网格体系。

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