为何在Bootstrap布局中需设置height:0才能让div正常滚动？

问题场景 #

在Bootstrap的列布局中实现内容过多时可滚动的div，发现只有给滚动容器设置height: 0才能达到预期滚动效果，想理解这个设置的原理。

示例代码 #

<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />
<!-- 占满视口并放置行容器 -->
<form class="vh-100 bg-danger container-fluid">
  <!-- 在容器内添加内边距（不覆盖container-fluid） -->
  <div class="p-2 h-100 d-flex flex-column gap-2">
    <div class="row bg-black">Row 1</div>
    <div class="row bg-black">Row 2</div>

    <!-- 填充视口剩余空间 -->
    <div class="row gap-2 flex-grow-1">
      <div class="col bg-black">Column 1</div>
      <div class="col-6 bg-black d-flex flex-column">
        <div>Column 2</div>

        <!-- 为什么需要height: 0？ -->
        <div class="flex-grow-1 overflow-auto" style="height: 0">
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px">test</div>
        </div>
      </div>
      <div class="col bg-black">Column 3</div>
    </div>
  </div>
</form>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

原理解释 #

这本质是Flexbox布局的默认规则导致的：

• 滚动容器的父元素是d-flex flex-column的Flex容器，你给滚动容器加了flex-grow: 1，目的是让它占满父元素的剩余空间。
• 但Flexbox默认给所有Flex子元素设置了min-height: auto，这条规则的意思是：子元素的高度不能小于它自身内容的高度。也就是说，当滚动容器里的内容太多时，它会直接撑大自己，甚至把父元素也撑变形，完全忽略你设置的flex-grow: 1和overflow-auto。
• 设置height: 0就相当于强制打破了这个默认规则，把滚动容器的最小高度限制为0，这样flex-grow: 1才能真正生效——让滚动容器占满父元素分配的剩余空间。当内容高度超过这个空间时，overflow-auto就会触发，自动出现滚动条。

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