html - s 与容器内的相对宽度- 如何溢出？

Question

情况

• <div>我在一个容器中有一组元素<div>。
• 内部的宽度<div>设置为百分比的相对大小。
• 有时内部 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>

https://jsfiddle.net/pgvhfb9e/2/

如您所见，红色的与黑色的尺寸完全相同。

我想要的是

我需要的是最后一个 div 在容器的末端被简单地切断。因此，红色的应该只有 10%，而黑色的应该是 90%。

标签： htmlcssflexbox

Answer 1

• flex-shrink: 0在子元素上
• overflow: hidden在父母身上

这可以防止子元素被缩小以适应父元素，并防止您的“10% 可见”子元素在父元素的范围之外可见。

<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>

这是一个使用flex速记属性同时设置flex-grow、flex-shrink和flex-basis属性的变体。

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