嵌套的柔性盒divs中沒有隱藏溢出

爲什麼兩個嵌套的flexbox div內沒有隱藏文本溢出？它在一格內時可以工作。嵌套的柔性盒divs中沒有隱藏溢出

特別是：爲什麼內部div比外部div大？

瀏覽器：Chrome瀏覽器52.0.2743.60

這裏是一個最小的代碼示例：

<style> 
.outer { 
    display: flex; 

    width: 500px; 
    border: 2px solid red; 
} 
.inner { 
    display: flex; 

    border: 2px solid blue; 
} 
.text { 
    overflow: hidden; 
    white-space: nowrap; 
} 
</style> 

<div class="outer"> 
    <div class="inner"> 
    <div class="text"> 
     My overflow should be hidden but it's not aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
    </div> 
    </div> 
</div>

來源

2016-08-01 user6661680

澄清：對此有一些解決方法，但我想知道_why_它發生。爲什麼內盒比外盒大？ – user6661680

我相信這是值得做的寬度的外彎曲，但內一個沒有，所以這會使瀏覽器對溢出位置感到困惑。您可以通過應用的寬度，以你的內心或文字的div像這樣解決這個問題：

.inner { 
    display: flex; 
    width: 100%; /* or 500px */ 
}

另一種方法是將overflow: hidden移動到外側彎曲。

來源

2016-08-01 05:04:08 Zenny

嵌套的柔性盒divs中沒有隱藏溢出

回答

相關問題