Bootstrap4：如何让Column1的SectionA拉伸填充行高并实现overflow scroll？

嘿，我来帮你搞定这个布局需求！你想要让Column 1里的Section A自动拉伸到和Column 2等高，同时内部内容溢出时能滚动，而且Column 2的高度要主导整个行的高度对吧？用Bootstrap 4自带的flex工具类就能轻松实现，不用写复杂的自定义CSS，我给你一步步说明：

核心思路 #

Bootstrap 4的布局基于Flexbox，我们可以利用以下几个关键工具类轻松实现需求：

• 让**行（row）**保持flex容器属性（默认就是，明确加上d-flex更稳妥），确保两个Column默认等高。
• 给Column 1添加d-flex flex-column，使其内部元素（Button和Section A）垂直排列，并且支持垂直方向的空间分配。
• 给Section A添加flex-grow-1，让它自动填充Column 1里除了Button之外的所有剩余高度，从而和Column 2保持等高；再搭配overflow-auto（或overflow-y-scroll）实现内容溢出时的滚动效果。

完整代码示例 #

HTML部分

<div class="container mt-4">
  <div class="row d-flex">
    <!-- Column 1 -->
    <div class="col-md-6 d-flex flex-column">
      <button id="addTextBtn" class="btn btn-primary mb-3">添加文本到Section A</button>
      <div id="sectionA" class="flex-grow-1 overflow-auto p-3 border">
        初始内容
      </div>
    </div>

    <!-- Column 2 -->
    <div class="col-md-6">
      <div class="mb-3">
        <button class="btn btn-secondary" data-toggle="collapse" data-target="#sectionB">
          折叠Section B
        </button>
        <div id="sectionB" class="collapse show p-3 border">
          Section B 折叠面板内容<br>
          多几行内容让Column 2变高<br>
          测试测试测试<br>
          测试测试测试<br>
          测试测试测试<br>
        </div>
      </div>
      <div id="sectionC" class="p-3 border">
        Section C 内容<br>
        更多内容<br>
        更多内容<br>
        更多内容<br>
        更多内容<br>
        更多内容<br>
      </div>
    </div>
  </div>
</div>

JavaScript部分（用于动态添加文本）

document.getElementById('addTextBtn').addEventListener('click', function() {
  const sectionA = document.getElementById('sectionA');
  for (let i = 0; i < 10; i++) {
    const p = document.createElement('p');
    p.textContent = `动态生成的文本行 ${i+1}`;
    sectionA.appendChild(p);
  }
});

关键细节解释 #

• d-flex flex-column：让Column 1变成垂直方向的flex容器，这样它的子元素会沿着垂直方向排列，并且可以利用flex的空间分配规则。
• flex-grow-1：这是实现等高的核心！它会告诉Section A“把Column 1里剩下的所有垂直空间都占满”，不管Column 2的高度怎么变化，Section A都会自动匹配。
• overflow-auto：当Section A里的内容超过它的高度时，自动显示滚动条，完美解决内容溢出的问题。
• 为什么之前设置height:100%无效？因为百分比高度需要父元素有明确的高度值，而flex布局下用flex-grow是更灵活的动态空间分配方式，完全适配这种“由另一列主导高度”的场景。

你可以直接把这段代码拿去测试，点击按钮添加文本时，Section A会自动出现滚动条，而且始终和Column 2保持等高哦！

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