ネストされたflexbox div内にオーバーフローが隠されていない

Question

2つのネストされたflexbox div内でテキストオーバーフローが隠されないのはなぜですか？ 1つのdiv内にあるときに機能します。

特に、内側のdivが外側のdivよりも大きいのはなぜですか？

ブラウザ：クローム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> 

Answer 1

私は幅を持つあなたの外側のフレックスとは何かであると考えていますが、内側のものはありません、このため、オーバーフローがどこにあるかについてブラウザが混乱します。あなたはそのようなあなたのインナーやテキストのdivに幅を適用することによって、この問題を解決することができます

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

もう一つの選択肢は、あなたの外側のフレックスにoverflow: hiddenを移動することです。