Überlauf nicht versteckt in verschachtelten Flexbox divs

Question

Warum ist kein Textüberlauf in zwei verschachtelten Flexbox divs versteckt? Es funktioniert, wenn es in einem div ist.

Insbesondere: warum ist das innere div größer als das äußere div?

Browser: Chrome 52.0.2743.60

Hier ist ein minimales Codebeispiel:

<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

Ich glaube, es ist etwas nicht mit Ihrem äußeren flex mit einer Breite, aber die inneren tut zu tun, dies verwirrt den Browser, wo sich der Überlauf befindet. Sie können dieses Problem beheben, indem eine Breite auf Ihren inneren oder Text div Anwendung etwa so:

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

Eine weitere Alternative ist die overflow: hidden zu Ihrem äußeren flex zu bewegen.