web-dev-qa-db-fra.com

firefox overflow-y ne fonctionne pas avec imbriqué flexbox

J'ai conçu une mise en page 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>
css3firefoxoverflowflexbox
72
rekna

tl; dr: vous avez besoin de min-height:0 dans votre .level-0-row2 règle. ( 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 prend pas en compte les propriétés de "débordement" sur leurs enfants/descendants).

Chaque fois que vous avez un élément avec overflow: [hidden|scroll|auto] inside d’un élément flex, vous devez donner à son élément flex ancêtre min-width:0 (dans un conteneur flexible horizontal) ou min-height:0 (dans un conteneur de flex vertical), pour désactiver ce comportement de min-dimensionnement, sinon l'élément de flex refusera de réduire la taille plus petite que la taille de min-contenu de l'enfant.

Voir https://bugzilla.mozilla.org/show_bug.cgi?id=104352 pour plus d'exemples de sites qui ont été piqués par cela. (Notez que ceci est juste un métabug pour suivre les sites qui ont été cassés par ce type de problème, après que ce texte de spécification ait été implémenté - ce n'est pas vraiment un bogue dans Firefox.)

Vous ne le verrez pas dans Chrome (du moins, pas à partir de cette publication) car ils n'ont pas encore implémenté ce comportement de dimensionnement minimal . (EDIT: Chrome a maintenant implémenté ce comportement de réduction de taille, mais ils peuvent toujours réduire de façon incorrecte les tailles minimales à 0 dans certains cas) .)

175
dholbert