html - CSS 宽度和溢出

Question

如果我无法控制内部 span 的宽度设置(即它是由某些 JS 设置的)并且组合宽度大于 100%，我如何强制它在容器的宽度内显示它们没有第三个跨度的框包装并显示在另外两个跨度的下方。

.box {
  height: 10px;
  width: 50%;
  margin: 3px 0;
}

.box span {
  height: 10px;
  float: left;
  display: block;
}

<div class="box">
   <span style="width: 40.0%; background: red;"></span>
   <span style="width: 10.0%; background: green;"></span>
   <span style="width: 50.1%; background: blue;"></span>
</div>

Answer 1

对父元素使用display: flex。 flex 属性会将多余的宽度调整为 100%