Comment rendre les enfants flexbox 100% Hauteur de leur parent?

j'ai répondu à une question similaire ici .

je sais que vous avez déjà dit position: absolute; est incommode mais ça marche. Voir ci-dessous pour plus d'informations sur la correction de la question resize.

Voir Aussi ce jsFiddle pour une démo, bien que je n'ai ajouté que des préfixes webkit donc ouverts dans Chrome.

vous avez essentiellement deux questions que je vais traiter séparément.

1. obtenir l'enfant d'un objet flexible pour remplir la hauteur 100%
   • Set position: relative; sur le parent de l'enfant.
   • Set position: absolute; sur l'enfant.
   • vous pouvez ensuite régler largeur/hauteur selon les besoins (100% dans mon échantillon).
2. la Fixation de la redimensionner défilement "bizarrerie" dans Chrome
   • Mettez overflow-y: auto; sur la div.
   • la hauteur de la flèche doit être spécifiée explicitement. Mon échantillon a déjà une hauteur de 100% mais si aucune n'est déjà appliquée, vous pouvez spécifier height: 0;

voir cette réponse pour plus d'information sur la question de défilement.

si je comprends bien, vous voulez que flex-2-child remplisse la hauteur et la largeur de son parent, de sorte que la zone rouge soit entièrement couverte par le vert?

si c'est le cas, vous avez juste besoin de définir flex-2 pour utiliser flexbox:

.flex-2 {
    display: flex;  
}

alors dites à flex-2-child de devenir flexible:

.flex-2-child {    
    flex: 1;
}

voir http://jsfiddle.net/2ZDuE/10/

la raison est que flex-2-child n'est pas un flexbox item, mais son parent l'est.

semblable à la réponse de David Storey, mon travail autour est:

.flex-2
{
 align-items: stretch;
 display: flex;
}

alternativement à align-items , vous pouvez utiliser align-self juste sur le .flex-2-child élément que vous voulez étiré.

je suppose que le comportement de Chrome est plus conforme à la spécification CSS (bien qu'il soit moins intuitif). Selon la spécification Flexbox , la valeur par défaut stretch de align-self propriété ne modifie que la utilisée valeur de la "propriété croisée" de l'élément ( height , dans ce cas). Et, si je comprends bien le CSS2.1 spec , les hauteurs en pourcentage sont calculées à partir du spécifié valeur de height de la société mère , et non sa valeur d'usage. La valeur spécifiée du parent height n'est pas affectée par des propriétés flex et est toujours auto .

paramètre explicite height: 100% rend formellement possible de calculer le pourcentage de hauteur de l'enfant, tout comme le réglage height: 100% à html permet de calculer le pourcentage de hauteur de body dans CSS2.1.

j'ai trouvé la solution par moi-même, supposons que vous avez le CSS ci-dessous:

.parent {
  align-items: center;
  display: flex;
  justify-content: center;
}

.child {
  height: 100%; <- didn't work
}

dans ce cas, régler la hauteur à 100% ne fonctionnera pas, donc ce que je fais c'est Régler la règle margin-bottom à auto , comme:

.child {
  margin-bottom: auto;
}

et l'enfant sera aligné à l'extrémité supérieure du parent, vous pouvez également utiliser la règle align-self de toute façon si vous préférez.

.child {
  align-self: flex-start;
}

html

<div class="container">
    <div class="flex-1"></div>
    <div class="flex-2">
        <div class="flex-2-child"></div>
    </div>
</div>

css

.container {
    height: 200px;
    width: 500px;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}
.flex-1 {
   flex:1 0 100px;
    background-color: blue;
}
.flex-2 {
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1 0 100%;
    background-color: red;
}
.flex-2-child {
    flex: 1 0 100%;
    height:100%;
    background-color: green;
}

http://jsfiddle.net/2ZDuE/750 /

une idée serait que display:flex; avec flex-direction: row; remplit le container div avec .flex-1 et .flex-2 , mais cela ne signifie pas que .flex-2 a un défaut height:100%; même si elle est étendue à pleine hauteur et d'avoir un élément enfant ( .flex-2-child ) avec height:100%; vous aurez besoin de définir le parent à height:100%; ou utiliser display:flex; with flex-direction: row; on the .flex-2 div too.

D'après ce que je sais display:flex ne sera pas étendre la hauteur de tous les éléments de votre enfant à 100%.

une petite démo, a enlevé la hauteur de .flex-2-child et utilisé display:flex; sur .flex-2 : http://jsfiddle.net/2ZDuE/3 /

C'est ma solution en utilisant css+

tout d'abord si premier enfant (flex-1) devrait être de 100px ne devrait pas être flex. Dans css+ en fait, vous pouvez définir des éléments flexibles et/ou statiques (colonnes ou lignes) et votre exemple devient aussi facile que ceci:

<div class="container">
  <div class="EXTENDER">
    <div class="COLS">
      <div class="CELL _100px" style="background-color:blue">100px</div>
      <div class="CELL _FLEX" style="background-color:red">flex</div>
    </div>
  </div>
</div>

conteneur css:

.container {
    height: 200px;
    width: 500px;
    position:relative;
}

et de toute évidence inclure css+ 0.2 core

entendre violon