web-dev-qa-db-fra.com

Flexbox - Les enfants se développent pour remplir la hauteur

J'ai un pied de page dynamique sur ma page et je m'attends à ce que le contenu au-dessus évolue pour atteindre le haut du pied de page, c'est bien et tout, mais j'ai un problème:

#snippet-container {
  height: 300px;
  width: 200px;
}

#page {
  display: flex;
  flex-flow: column;
  height: 100%;
}

#content {
  flex: 1 1 auto;
  background: blue;
}

#content .test {
  width: 100%;
  height: 100%;
  background: yellow;
  border: 2px solid red;
}

#footer {
  flex: 0 1 10vh;
  background: black;
}
<div id="snippet-container">
  <div id="page">
    <div id="content">
      <div class="test"></div>
    </div>
    <div id="footer"></div>
  </div>
</div>

Je m'attendrais à ce que le .test élément pour remplir le #content élément, d'où le 100%/100% width/height mais ce n'est pas le cas.

Vous pouvez voir cela se refléter lorsque j'ai donné le .test élément une bordure rouge dans l'extrait de code.

htmlcsscss3flexbox
15
Hobbyist

PROBLÈME:

Le problème est que votre #page le conteneur flexible n'est pas atteint le .test élément depuis .test n'est pas un enfant, c'est un descendant de l'élément flexible.

Le contenu d'un conteneur flexible se compose de zéro ou plusieurs éléments flexibles: chaque enfant d'un conteneur flexible devient un élément flexible.

Chaque élément flexible est affecté par le conteneur flexible, mais les descendants de l'élément flexible ne le sont pas.

SOLUTION:

Vous devez ajouter display: flex à ton #content ainsi que.

JSFiddle

SNIPPET CODE: 

#snippet-container {
  height: 300px;
  width: 200px;
}
#page {
  display: flex;
  flex-flow: column;
  height: 100%;
}
#content {
  display: flex;
  height: 100%;
  background: blue;
}
#content .test {
  width: 100%;
  background: yellow;
  border: 2px solid red;
}
#footer {
  flex: 0 1 10vh;
  background: black;
}
<div id="snippet-container">
  <div id="page">
    <div id="content">
      <div class="test"></div>
    </div>
    <div id="footer"></div>
  </div>
</div>
20
Ricky

Cela le fait pour vous:

https://jsfiddle.net/wjr0wwht/2/

Pour que la division "test" atteigne sa pleine hauteur, vous devez également créer un contenu display: flex comme ça:

#content {
  flex: 1 1 auto;
  background: blue;
  display: flex;
  flex-direction: column; 

}

puis faire grandir le test lui-même:

#content .test {
  background: yellow;
  border: 2px solid red;
  flex-grow: 1;
}
6
sifriday