web-dev-qa-db-fra.com

Comment étirer l'enfant flex pour remplir la hauteur du conteneur?

J'ai besoin d'étirer l'enfant jaune pour remplir toute la hauteur du parent. Sans régler la hauteur du parent. La hauteur du parent devrait dépendre du texte bleu de l'enfant . https://jsfiddle.net/7vava1c/1/

<div style='display: flex'>
  <div style='background-color: yellow;height: 100%; width: 20px'>
  </div>
  <div style='background-color: blue'>
  some<br>
  cool<br>
  text
  </div>
</div>

htmlcsscss3flexbox
8
Konstantin Vahrushev

Lorsque vous utilisez Flexbox, l’erreur majeure est de commencer à utiliser height: 100% partout.

Nous sommes habitués à cela dans de nombreux cas, bien que s’agissant de Flexbox, il casse souvent le problème.

La solution est simple, il suffit de supprimer le height: 100%, et cela fonctionnera automatiquement.

La raison en est que, pour flex item in row direction (valeur par défaut), le align-items contrôle le comportement vertical et que sa valeur par défaut est stretch, il fonctionne simplement tel quel.

Extrait de pile

<div style='display: flex'>
  <div style='background-color: yellow; width: 20px'>
  </div>
  <div style='background-color: blue'>
  some<br>
  cool<br>
  text
  </div>
</div>

24
LGSon

Si j'ai bien compris, vous recherchez la propriété align-items, qui définit la disposition le long de l'axe transversal, dans le cas présent verticalement.

Vous pouvez trouver un bon aperçu ici: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.flexbox {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch; // <-- stretch vertical (default value, can be omitted here)
  align-content: center;
}

.box {
    padding: 1em;
    text-align: center;
    margin: 1em;
}

.box--yellow {
  background-color: yellow;
}

.box--blue {
  background-color: blue;
  color: white;
}
<div class="flexbox">
  <div class="box box--yellow">
    yellow
  </div>
  <div class="box box--blue">
    some<br>
    cool<br>
    text
  </div>
</div>

3
Daniel Sixl

<div style='display: flex'>
  <div style='background-color: yellow; width: 20px'>

  </div>
  <div style='background-color: blue'>
    some<br>
    cool<br>
    text
  </div>
</div>

0
kyl