comment faire fonctionner les flexbox imbriquées

J'ai un petit exemple d'un imbriquée flexbox de l'installation: 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, la règle suivante s'applique:

  • CSS "boîte" de classes utilisent flexbox propriétés sur lesquelles seul le boxContent est dit à se développer. Pour CSS spécifique des propriétés et des valeurs, veuillez consulter la tripoter.
  • 'entière' juste définit à la fois 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, c'est ce que je pourrait supposer qu'il a à faire, ce qui est l'étirement de l'intérieur .boxContent. Dans google Chrome, cependant, à l'intérieur .boxContent ne pas être étirée.

Ce que quelqu'un a une idée de comment rendre le contenu étirement dans Chrome ? peut-être un spécifique webkit propriété qui est absent ?

source d'informationauteur Thomas

  1. 15

    À moins que vous besoin supplémentaire div, le supprimer. Il y a parfois une différence entre la hauteur d'un élément et sa longueur le long de la axe principal (colonne d'orientation), qui est à l'origine d'une certaine confusion ici. Fondamentalement, il semble comme il est plus grand que le navigateur croit être, c'est pourquoi height: 100% ne fonctionne pas comme prévu (je ne suis pas certain comportement est correct dans ce cas).

    Pour quelque raison que ce soit, la promotion de l'élément à une conteneur flex œuvres.

    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>
  2. 10

    Cette question a été liée à un problème spécifique: Comment faire des éléments imbriqués dans un flex zone de remplir la totalité de la hauteur? La réponse courte est:

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

    CourtDemone l'explique bien (plus ici):

    Selon la flexbox spécification, un align-self:stretch valeur (la valeur par défaut pour un flex avais élément) ne change que la utilisé valeur d'un élément de la croix-de la taille de la propriété (dans ce cas, la hauteur). Les pourcentages sont toutefois calculés à partir de la spécifié valeur de la société mère de la croix-de la taille de la propriété, il est utilisé la valeur.

  3. 3

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

    Vous avez besoin de faire boxContent relative placé et c'est boîte contenant absolue.

    Avec la fixation d'un supplément de classe css à l'intérieur de la div:

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

    et css suivant:

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

    voici la mise à jour de jsfiddle: http://jsfiddle.net/MUrPj/223/

    Cette question est assez vieux, mais cela peut être utile pour les futurs visiteurs