如何在Flex布局中忽略子元素宽度，维持列宽比例？

给右侧的flex子容器添加 flex: 1 属性，即可让它占据父容器的剩余空间，同时保留内部滚动特性，且不会被内部超宽元素撑开宽度，最终让左侧黄色列的尺寸不受影响，和不含品红色元素的布局比例完全一致。

修改后的代码示例 #

<div style="display: flex; background: black; max-width: 600px;">
  <div style="background: yellow">AAA AAA AAA AAA AAA AAA</div>
  <div style="min-width: 0; flex: 1;">
    <div style="background: cyan">BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB</div>
    <div style="background: magenta; overflow-x:auto; width:100%; min-width: 0;">
      <div style="width:3000px"> 
        CCC CCC
      </div>
    </div>
    <div style="background: green">DDD DD DDDDDD D</div>
  </div>
</div>

原理说明 #

• 默认状态下，flex子项的宽度由内部内容决定，当存在超宽子元素时，会导致整个右侧列被撑开，进而挤压左侧列的空间。
• 设置 flex: 1 后，右侧列会优先占据父容器的剩余空间，不再依赖内部内容计算宽度。
• 已有的 min-width: 0 用于突破flex容器的最小宽度限制，确保内部滚动元素能正常触发横向滚动，而不会强制撑开父容器。

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