未设置min-width的flex列内溢出区块导致父容器max-width失效

因为flex列（column2）默认的min-width: auto会跟随内部内容宽度扩张，进而撑破父容器的max-width，但又不能修改flex列的相关样式，我们可以通过调整内部容器的样式来约束宽度、触发溢出效果：

• 方案1：给溢出容器添加display: flex
  flex容器会自动约束子元素宽度，避免子元素撑破自身，配合overflow: auto就能实现横向滚动，同时不会影响父容器的max-width。

• 方案2：给溢出容器添加display: grid
  原理和flex容器类似，grid容器同样会限制子元素宽度，触发溢出滚动。

• 方案3：给溢出容器设置width: 0; min-width: 100%;
  用width: 0强制容器宽度不跟随内容扩张，再通过min-width: 100%保证它占满父容器的可用宽度，让overflow: auto正常生效。

• 方案4：绝对定位溢出容器
  给溢出容器设置position: absolute; left: 0; right: 0; height: 100%;，同时给flex列（column2）添加position: relative（这不属于flex相关样式，符合要求），让溢出容器的宽度由父容器决定，从而触发滚动。

修改后的代码示例（以方案1为例） #

CSS #

.wrapper {
    max-width: 800px;
    background-color: grey;
}
.flex {
    display: flex;
}
.column1 {
    width: 200px;
    height: 100px;
    flex-shrink: 0;
    background-color: green; 
}
.column2 {
    flex-grow: 1;
    background-color: red; 
    /* 未修改任何flex相关样式 */
}
.overflow {
    max-width: 100%;
    overflow: auto; 
    display: flex; /* 仅新增这一行 */
}
.wideContent {
    height: 100px;
    width: 2500px;
}

HTML #

<div class="wrapper">
  <div class="flex">
    <div class="column1"></div>
    <div class="column2">
      <div class="overflow">
        <div class="wideContent"></div>
      </div>
    </div>
  </div>
</div>

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