如何阻止flex:1的div因内容过大而超出容器范围？

问题描述 #

我需要实现两栏布局：一栏宽度固定为150px，另一栏填充容器剩余空间，且内容超出该栏范围时可横向滚动。用Flexbox实现时，自适应栏因内容过大直接突破了容器300px的max-width限制，导致整体宽度超标。另外容器宽度是响应式断点动态变化的，不想每次尺寸变化都手动计算剩余宽度，求调整方案。

原代码 #

HTML #

<div class="outer-container">
  <div class="first-column">
    Small content
  </div>
  <div class="second-column">
    <div class="scrolling-container">
      <div class="scrolling-container-large-content">
        My large content is here and this is the issue that's causing it to go beyond the default flex width
      </div>
    </div>
  </div>
</div>

CSS #

.outer-container {
  display: flex;
  width: 300px;
  max-width: 300px;
}

.first-column {
  width: 150px;
  max-width: 150px;
  border: 1px solid #ccc;
  padding: 10px;
}

.second-column {
  flex: 1;
  border: 1px solid #ccc;
  padding: 10px;
}

.scrolling-container {
  width: 100%;
  max-width: 100%;
  overflow: auto;
}

解决方案 #

核心是打破Flexbox的默认最小宽度限制，让自适应栏严格遵守容器分配的空间：

修改后的CSS #

.outer-container {
  display: flex;
  width: 300px;
  max-width: 300px;
}

.first-column {
  width: 150px;
  max-width: 150px;
  border: 1px solid #ccc;
  padding: 10px;
}

.second-column {
  flex: 1;
  border: 1px solid #ccc;
  padding: 10px;
  min-width: 0; /* 关键：取消flex项默认的最小宽度限制 */
}

.scrolling-container {
  width: 100%;
  overflow: auto;
}

.scrolling-container-large-content {
  white-space: nowrap; /* 可选：让长文本不换行，触发横向滚动 */
}

原理说明 #

Flexbox中，flex项默认的min-width值为auto，意味着它的宽度不会小于内部内容的最小宽度。这就导致即使设置了flex:1，当内部内容过长时，自适应栏会被撑大，直接突破外层容器的max-width限制。

添加min-width:0后，自适应栏的最小宽度被强制设为0，它会严格占据容器分配的剩余空间，内部的overflow:auto就能正常生效，自动处理超出内容的滚动。这种方案不需要手动计算剩余宽度，完全适配响应式容器的动态尺寸变化。

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