Firefox overflow - y ne fonctionne pas avec flexbox imbriqué
J'ai conçu une disposition 100% Largeur 100% hauteur avec CSS3 flexbox, qui fonctionne à la fois sur IE11 (et probablement sur IE10 si l'émulation de IE11 est correcte).
Mais Firefox (35.0.1), overflow-y ne fonctionne pas. Comme vous pouvez le voir dans ce codepen : http://codepen.io/anon/pen/NPYVga
Firefox ne rend pas le débordement correctement. Il montre une barre de défilement
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>1 réponses
Tl; dr: vous avez besoin de min-height:0 dans votre règle .level-0-row2. (Voici un codepen avec ce correctif.)
Explication plus détaillée:
Les éléments Flex établissent une taille minimale par défaut basée sur la taille intrinsèque de leurs enfants (qui ne considère pas les propriétés de "débordement" sur leurs enfants/descendants).
Chaque fois que vous avez un élément avec overflow: [hidden|scroll|auto] à l'intérieur de d'un élément flex, vous devez donner son ancêtre flex item min-width:0 (dans un conteneur flex horizontal) ou min-height:0 (dans un conteneur flex vertical), pour désactiver ce comportement de min-dimensionnement, sinon l'élément flex refusera de rétrécir plus petit que la taille de contenu min de l'enfant.
Voir https://bugzilla.mozilla.org/show_bug.cgi?id=1043520 pour plus d'exemples de sites qui ont été piqués par ce. (Notez que ceci est juste un metabug pour suivre les sites qui ont été brisés par ce genre de problème, après que ce texte de spécification a été implémenté-ce n'est pas réellement un bug dans Firefox.)
Vous ne verrez pas ceci dans Chrome (du moins, pas à partir de cette publication) car ils n'ont pas encore implémenté ce comportement de dimensionnement minimum . (EDIT: Chrome a maintenant implémenté ce comportement de min-dimensionnement, mais ils peuvent toujours réduire incorrectement Les min-sizes à 0 dans certains cas .)