flex布局容器内百分比宽度子div总宽超100%时如何实现溢出而非被压缩？

• 外层为作为容器的div元素，内部嵌套若干子div元素
• 所有子div的宽度均使用百分比设置为相对尺寸
• 部分场景下子div的宽度总和会超过容器宽度的100%

容器设置为flex布局时，默认会自动压缩子div的尺寸以适配容器宽度，无法保留子div设置的原始宽度占比，对应示例代码如下：

<div id="container" style="float:left; display:flex; width: 500px">
    <div style="background-color: black; width: 90%">test</div>
    <div style="background-color: red; width: 90%">test</div>
</div>

示例中两个子div被等比压缩，尺寸完全一致，不符合预期需求。

子div按照各自设置的百分比宽度正常渲染，总宽度超出容器的部分直接被容器边界裁剪。以上述示例为例，期望效果为黑色背景的子div占据容器90%的宽度，红色背景的子div仅显示容器剩余的10%区域，超出容器边界的部分被截断。

该现象由flex布局子元素的默认收缩规则导致：容器主轴空间不足时，子元素会按照默认的flex-shrink: 1属性值等比压缩自身尺寸，适配容器总宽度，因此预先设置的宽度不会被严格保留。
实现需求仅需两处调整：

• 给需要保留原始宽度的flex子元素设置flex-shrink: 0，关闭自动压缩逻辑，子元素将严格按设定宽度渲染
• 给flex容器设置overflow: hidden，直接裁剪超出容器边界的内容

修改后的可直接运行的示例代码：

<div id="container" style="float:left; display:flex; width: 500px; overflow: hidden;">
    <div style="background-color: black; width: 90%; flex-shrink: 0;">test</div>
    <div style="background-color: red; width: 90%; flex-shrink: 0;">test</div>
</div>

设置完成后，黑色背景子元素将严格占据容器90%的宽度，红色背景子元素从容器90%宽度位置开始排布，超出容器右边界的部分直接被裁剪，仅显示落在容器剩余10%宽度区域的内容，匹配预期效果。
如果容器内所有子元素都需要保留原始宽度，可在容器上添加批量样式，避免重复给每个子元素写属性：

#container > * {
  flex-shrink: 0;
}

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