Bootstrap列嵌套宽元素致列宽异常的问题及解决咨询

Bootstrap 的 .row 是 flex 容器，.col 作为 flex 子项，默认带有 min-width: auto 特性——这个特性会让 flex 子项的宽度至少能容纳内部内容。当蓝色列里嵌套了宽度 10000px 的元素时，哪怕内层加了 overflow:scroll，外层的 .col 因为 min-width:auto 的限制，会被超大内容直接撑开占满整行，导致黄色列被挤走。

而手动设置 width:100px 时，相当于强制给 .col 指定了宽度，打破了 min-width:auto 的限制，flex 布局就能重新分配两列各占 50% 的宽度。

无需手动设置固定列宽，只需要给蓝色的 .col 添加 min-width: 0 样式，就能让它在 flex 布局中正常保持 50% 宽度，同时内层的 overflow:scroll 也能正常生效：

<div class="row">
  <div class="col" style="background:blue; min-width: 0;">
    <div style="overflow:scroll;">
      <div style="width:10000px;">should be overflowed and 50%</div>
    </div>
  </div>
  <div class="col" style="background:yellow">should be 50%</div>
</div>

注：Bootstrap 的 .col 默认已经设置了 flex-shrink:1，所以核心是通过 min-width:0 解除 flex 子项的最小宽度限制。

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