web-dev-qa-db-fra.com

comment faire fonctionner les flexbox imbriquées

J'ai un petit exemple d'une configuration imbriquée flexbox: http://jsfiddle.net/ThomasSpiessens/MUrPj/12/

<div class="box fullSize">
    <div class="boxHeader">HEADER</div>
    <div class="boxContent">
        <div class="box fullSize">
            <div class="boxHeader moregreen">INNER HEADER</div>
            <div class="boxContent red">CONTENT CONTENT CONTENT</div>
            <div class="boxFooter moreblue">INNER FOOTER</div>
        </div>
    </div>
    <div class="boxFooter">FOOTER</div>
</div>

Dans cet exemple, ce qui suit s'applique:

  • Les classes CSS "box" utilisent flexbox propriétés sur lesquelles seul boxContent est appelé à croître. Pour les propriétés et valeurs CSS spécifiques, veuillez vérifier le violon.
  • 'fullSize' définit simplement la largeur et la hauteur à 100%.

Lorsque vous vérifiez ce violon avec Firefox et Chrome vous obtenez des résultats différents. Dans Firefox, il fait ce que je suppose qu'il doit faire, qui étire le .boxContent interne. Dans Chrome cependant, le .boxContent interne n'est pas étiré.

Quelqu'un aurait-il une idée de la façon d'étirer le contenu dans Chrome également? Peut-être une propriété Webkit spécifique qui manque?

cssgoogle-chromehtmlflexbox
21
Thomas

Sauf si vous avez besoin de cette div supplémentaire, supprimez-la. Il existe parfois une différence entre la hauteur d'un élément et sa longueur le long de l'axe principal (orientation de la colonne), ce qui crée une certaine confusion ici. Fondamentalement, il semble comme étant plus grand que le navigateur ne le pense, c'est pourquoi height: 100% ne fonctionne pas comme prévu (je ne sais pas quel comportement est correct dans ce cas).

Pour une raison quelconque, la promotion de l'élément en un conteneur flexible fonctionne.

http://jsfiddle.net/MUrPj/14/

<div class="box fullSize">
    <div class="boxHeader">HEADER</div>
    <div class="boxContent box">
        <div class="boxHeader moregreen">INNER HEADER</div>
        <div class="boxContent red">CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT</div>
        <div class="boxFooter moreblue">INNER FOOTER</div>
    </div>
    <div class="boxFooter">FOOTER</div>
</div>
19
cimmanon

Cette question a été liée à un problème spécifique: Comment faire en sorte que les éléments imbriqués dans une boîte flexible remplissent toute la hauteur? La réponse courte est:

Utilisation display:flex sur l'enfant et éviter height:100%. Voici un exemple simplifié sur codepen .

CourtDemone l'a bien expliqué (plus ici ):

Selon la spécification flexbox, un align-self:stretch value (la valeur par défaut pour un élément flex'd) ne change que la valeur utilisée de la propriété de taille croisée d'un élément (dans ce cas, la hauteur) . Cependant, les pourcentages sont calculés à partir de la valeur spécifiée de la propriété de taille croisée du parent, et non de sa valeur utilisée.

13
ldwg

J'ai trouvé une solution sans supprimer l'extra-div.

Vous devez rendre boxContent relatif positionné et sa boîte contenant absolue.

Avec l'attachement d'une classe CSS supplémentaire à la div intérieure:

<div class="boxContent">
    <div class="box fullSize innerBox">

et css suivant:

.boxContent {
  ...
    position: relative;
}
.innerBox{
    position: absolute;
    top: 0px;
    bottom: 0px;
}

voici le jsfiddle mis à jour: http://jsfiddle.net/MUrPj/223/

Cette question est assez ancienne, mais cela pourrait être utile pour les futurs visiteurs

3
user3200478