firefox overflow-y nicht das arbeiten mit verschachtelten flexbox
Ich soll 100% Breite, 100% Höhe Layouts mit css3 flexbox, die funktioniert sowohl auf IE11 (und wahrscheinlich auf IE10 wenn die emulation von IE11 korrekt ist).
Aber Firefox (35.0.1), overflow-y nicht funktioniert. Wie Sie sehen können, in diesem codepen :
http://codepen.io/anon/pen/NPYVga
firefox ist nicht rendering-überlauf korrekt. Es zeigt eine Bildlaufleiste
CSS:
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:
<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>
Du musst angemeldet sein, um einen Kommentar abzugeben.
tl;dr: Sie müssen
min-height:0
in Ihrem.level-0-row2
Regel. (Hier ist ein codepen mit beheben.)Ausführlichere Erklärung:
Flex-Elemente etablieren einen Standard-Mindest-Größe, basierend auf Ihre Kinder intrinsische Größe (die nicht als "überlauf" - Eigenschaften auf Ihre Kinder/Nachkommen).
Sobald Sie haben ein element mit
overflow: [hidden|scroll|auto]
innen von einem flex-Element, die Sie benötigen, zu geben, seine Vorfahren flex-Elementmin-width:0
(in eine horizontale flex-container) odermin-height:0
(in eine vertikale flex-container), um dies zu deaktivieren min-sizing-Verhalten oder sonst das flex item wird sich weigern, zu schrumpfen, die kleiner als des Kindes min-Größe des Inhalts.Sehen https://bugzilla.mozilla.org/show_bug.cgi?id=1043520 weitere Beispiele von Websites, die gebissen wurden von diesem. (Beachten Sie, dass dies nur ein metabug zu verfolgen-Websites, die gebrochen wurden, die durch diese Art der Problem, danach spec-text umgesetzt wurde-es ist nicht eigentlich ein bug in Firefox.)
Sie werden nicht sehen, diese in Chrome (zumindest nicht so wie dieses posting), weil Sie noch nicht implementiert, diese minimale Dimensionierung Verhalten noch.(EDIT: Chrome hat das jetzt umgesetzt wird dieses min-sizing-Verhalten, aber Sie können immer noch falsch Zusammenbruch min-Größen zu 0 in einigen Fällen.)display:flex
), je nach den Umständen.min-width:0
/min-height:0
hackarounds für Situationen wie diese, die Zukunft.* { min-height: 0; min-width: 0; }
?min-width:auto
Verhalten mit sich bringt. Insbesondere: flex-items sind auf Schrumpfbar bis auf Ihre gelöstmin-width
(odermin-height
wenn vertikal) standardmäßig, aufgrund der mitflex-shrink:1
in Ihrem ursprünglichen Stil. Also wenn Ihrmin-width
(odermin-height
) auf 0, dann die flex-items lassen sich verkleinern 0 standardmäßig, die möglicherweise nicht, was Sie wollen -- insbesondere, wenn es ist, nur weil andere gierig flex-Element ist stehlen alle den Raum.min-width:0
zu aggressiv: jsfiddle.net/85scnr1b Also, wirklich, Sie wollen nur hinzufügenmin-width:0
auf flex-Elemente, deren Inhalte kann "freundlich", wenn es ist gegeben eine beliebig kleinerewidth
als erwartet. (Gleiche gilt fürmin-height
&height
für vertikale flex-Container.)