Firefox-Überlauf funktioniert nicht mit verschachtelter Flexbox

76

Ich habe ein Layout mit 100% Breite und 100% Höhe mit CSS3-Flexbox entworfen, das sowohl auf IE11 als auch wahrscheinlich auf IE10 funktioniert, wenn die Emulation von IE11 korrekt ist.

Aber Firefox (35.0.1), Überlauf-y funktioniert nicht. Wie Sie in diesem Codepen sehen können: http://codepen.io/anon/pen/NPYVga

Firefox rendert den Überlauf nicht korrekt. Es zeigt eine Bildlaufleiste

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}
.level-0-container {
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column; 
}
.level-0-row1 {
  border: 1px solid black;
  box-sizing: border-box;
}
.level-0-row2 {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border: 1px solid black;
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}
.level-1-col1 {
  width: 20em;
  overflow-y: auto;
}
.level-1-col2 {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border: 4px solid blue;
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.level-2-row2 {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border: 4px solid red;
  box-sizing: border-box;
  overflow-y: auto;
}
<html>
<body>

    <div class="level-0-container">

        <div class="level-0-row1">
            Header text
        </div>

        <div class="level-0-row2">

            <div class="level-1-col1">
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                
            </div>

            <div class="level-1-col2">

                    <div class="level-2-row1">
                        Some text
                        <p/> Some text 2
                        <p/> Some text 3
                        <p/> 
                    </div>

                    <div class="level-2-row2">
                        <p>some text</p>
                        <p>some text</p> 
                        <p>some text</p> 
                        <p>some text</p>
                        <p>some text</p>
                        <p>some test</p>
                    </div> 
                </div>

        </div>

    </div>
</body>


</html>
Erweitern Sie das Snippet

css firefox overflow flexbox rekna
quelle

Antworten:

183

tl; dr: du brauchst min-height:0in deiner .level-0-row2Regel. ( Hier ist ein Codepen mit diesem Fix .)

Detailliertere Erklärung:

Flex-Elemente legen eine Standard-Mindestgröße fest, die auf der Eigengröße ihrer Kinder basiert (wobei die "Überlauf" -Eigenschaften ihrer Kinder / Nachkommen nicht berücksichtigt werden).

Wenn Sie ein Element overflow: [hidden|scroll|auto] innerhalb eines Flex-Elements haben, müssen Sie dessen Vorgänger-Flex-Element min-width:0(in einem horizontalen Flex-Container) oder min-height:0(in einem vertikalen Flex-Container) angeben, um dieses Min-Sizing-Verhalten oder den Flex zu deaktivieren Artikel weigert sich, kleiner als die Mindestgröße des Kindes zu schrumpfen.

Weitere Beispiele für Websites, die davon gebissen wurden, finden Sie unter https://bugzilla.mozilla.org/show_bug.cgi?id=1043520 . (Beachten Sie, dass dies nur ein Metabug ist, um Websites zu verfolgen, die durch diese Art von Problem beschädigt wurden, nachdem dieser Spezifikationstext implementiert wurde - es ist eigentlich kein Fehler in Firefox.)

Sie werden dies in Chrome nicht sehen (zumindest nicht ab diesem Beitrag), da dieses Mindestgrößenverhalten noch nicht implementiert wurde . (BEARBEITEN: Chrome hat dieses Min-Sizing-Verhalten jetzt implementiert, kann jedoch in einigen Fällen die Min-Größen fälschlicherweise auf 0 reduzieren .)

dholbert
quelle
3
Ich bin auf dieses Problem gestoßen, musste aber allen übergeordneten Flexbox-Spalten eine Mindesthöhe von 0 hinzufügen - eine Idee warum?
Ambroz Bizjak
1
Muss diese Mindesthöhe (in meinem Fall) auf jeden Vorfahren angewendet werden ? Oder nur der unmittelbare Elternteil?
Sam Storie
6
Es muss möglicherweise auf jeden Vorfahren angewendet werden, der ein flexibles Element ist (dh auf jeden Vorfahren, dessen Eltern es sind display:flex), abhängig von den Umständen.
Dholbert
1
Gibt es einen Grund, warum wir uns nicht einfach bewerben können * { min-height: 0; min-width: 0; }?
Brett
4
@Brett, hier ist eine jsfiddle, die die Art von Schlechtigkeit (Überlaufen / Überlappen von Inhalten) demonstriert, die durch min-width:0zu aggressive Verwendung entstehen kann : jsfiddle.net/85scnr1b Eigentlich möchten Sie also nur flexiblemin-width:0 Elemente hinzufügen , deren Inhalt sich "gut verhalten" kann, wenn dies der Fall ist gegeben ein beliebig kleiner widthals es erwartet. (Gleiches gilt für min-height& height, für vertikale Flex-Container.)
Dholbert