CSS寬度和溢出

Question

如果我不能控制內部跨度的寬度設置（即它由一些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％

Answer 2

您可以使用flexbox

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

 
.box span { 
 
    height: 10px; 
 
    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>