Flexbox - les Enfants s'étendre à remplir hauteur

J'ai un pied de page dynamique sur ma page et j'attends le contenu ci-dessus à l'échelle pour atteindre le sommet du pied de page, c'est très bien et tout, mais je vais avoir un problème:

CSS:

#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;
}

HTML:

<div id="snippet-container">
  <div id="page">
    <div id="content">
      <div class="test"></div>
    </div>
    <div id="footer"></div>
  </div>
</div>

J'attendrais la .test élément de remplir le #content élément, d'où le 100%/100% width/height cependant, il n'est pas.

Vous pouvez voir cela reflète que j'ai donné le .test élément d'une bordure rouge dans l'extrait de code.

êtes-vous essayer de tout remplir avec du jaune sans rouge à droite?
codepen.io/stylo
Essayez de remplacer flex-fow avec flex-direction. Que pourrait être le problème, bien que je ne suis pas sûr.
double possible: stackoverflow.com/q/33636796/3597276

InformationsquelleAutor Hobbyist | 2016-07-10

20

PROBLÈME:

Le problème, c'est que votre #page conteneur flex n'est pas atteindre la .test élément depuis .test n'est pas un enfant, il est un descendant de la flexion de l'élément.

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

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

SOLUTION:

Vous devez ajouter display: flex à votre #content ainsi.

JSFiddle

EXTRAIT DE CODE:

CSS:
```
#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;
}
```
HTML:
```
<div id="snippet-container">
  <div id="page">
    <div id="content">
      <div class="test"></div>
    </div>
    <div id="footer"></div>
  </div>
</div>
```
- Cette solution ne fonctionne que pour le flex enfant, mais si l'élément que vous avez besoin d'avoir 100% est enveloppé en plus des éléments div, puis chacun d'eux a besoin de la hauteur:100%, jsfiddle.net/mwx1k3b3/398
InformationsquelleAutor Ricky
6

Ce n'est pour vous:

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

Afin de faire le "test" div grandir à la hauteur, vous devez créer un contenu aussi un display: flex comme ceci:
```
#content {
  flex: 1 1 auto;
  background: blue;
  display: flex;
  flex-direction: column; 

}
```
et ensuite faire le test lui-même pour grandir:
```
#content .test {
  background: yellow;
  border: 2px solid red;
  flex-grow: 1;
} 
```
InformationsquelleAutor sifriday

Vous devez vous connecter pour publier un commentaire.