firefox overflow-y pas de travail avec imbriqué flexbox
J'ai conçu une largeur 100% 100% de la hauteur de mise en page avec css3 flexbox, qui travaille à la fois sur IE11 (et probablement sur IE10 si l'émulation de IE11 est correct).
Mais Firefox 35.0.1), overflow-y n'est pas de travail. Comme vous pouvez le voir dans cette codepen :
http://codepen.io/anon/pen/NPYVga
firefox n'est pas rendu débordement correctement. Il affiche une barre de défilement
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>Vous devez vous connecter pour publier un commentaire.
tl;dr: vous avez besoin
min-height:0dans votre.level-0-row2règle. (Voici un codepen avec ce correctif.)Explication plus détaillée:
Flex éléments établir un défaut de taille minimale qui est basée sur leurs enfants intrinsèque de la taille (ce qui ne veut pas envisager de "dépassement" des propriétés sur leurs enfants ou descendants).
Chaque fois que vous avez un élément avec
overflow: [hidden|scroll|auto]à l'intérieur de d'un flex élément, vous avez besoin de donner son ancêtre flex élémentmin-width:0(à l'horizontale conteneur flex) oumin-height:0(verticale conteneur flex), pour désactiver cette min-dimensionnement de comportement, ou bien le flex élément de refuser de se rétrécir plus petit que l'enfant min-taille du contenu.Voir https://bugzilla.mozilla.org/show_bug.cgi?id=1043520 pour plus d'exemples de sites qui ont été piqués par ce. (Note que c'est juste un metabug pour le suivi des sites qui ont été brisés par ce genre de problème, après cette spécification-texte a été mis en œuvre -- ce n'est pas vraiment un bug dans Firefox.)
Vous ne verrez pas cela en Chrome (au moins, pas de cette annonce) parce qu'ils n'ont pas mis en œuvre ce minimum comportement de dimensionnement encore.(EDIT: Chrome a maintenant mis en œuvre à ce min-dimensionnement de comportement, mais ils peuvent encore incorrecte de l'effondrement min-tailles 0, dans certains cas,.)display:flex), selon les circonstances.min-width:0/min-height:0hackarounds pour des situations de ce genre, aller de l'avant.* { min-height: 0; min-width: 0; }?min-width:autocomportement apporte. En particulier: flex éléments sont mis en place pour être rétractable à leurs résolumin-width(oumin-heightvertical) par défaut, par le fait d'avoirflex-shrink:1dans leur style initial. Donc, si vous définissezmin-width(oumin-height) à 0, alors votre flex éléments laissent réduire à 0 par défaut, ce qui pourrait ne pas être ce que vous voulez, surtout si c'est juste parce que l'autre gourmande flex élément est en train de voler tout l'espace.min-width:0trop agressive: jsfiddle.net/85scnr1b Alors, vraiment, vous ne voulez ajoutermin-width:0sur flex articles dont le contenu peut "se comportent bien" si elle est donnée arbitrairement petiteswidthqu'il attend. (En va de même pourmin-height&height, vertical conteneurs flex.)