Html <；部门>；容器内具有相对宽度的s<；部门>；-如何溢出？

形势

• 我在容器中有一组
  元素

• 内部
  的宽度按百分比设置为相对大小
• 有时，内部div的宽度总和超过100%

情况如何

目前发生的情况是，内部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在容器的末尾被简单地切断。 因此，红色的应仅为10%，而黑色的应为90%。

• 子元素上的弹性收缩：0

• 溢出：在父级上隐藏

这可以防止子元素缩小以适应父元素，并防止“10%可见”子元素在父元素的边界之外可见

测试
测试

为什么不将第二个CSS切换到10%而不是90%？这比显示的要复杂一点：D