Comment faire pour qu'un élément Flex ne remplisse pas la hauteur du conteneur Flex?

Question

Comme vous pouvez le constater dans le code ci-dessous, le div de gauche dans le conteneur Flex s’étire jusqu’à atteindre la hauteur du div de droite. Y a-t-il un attribut que je peux définir pour que sa hauteur soit le minimum requis pour conserver son contenu (comme d'habitude height: auto divs en dehors des conteneurs flex)?

#a {
  display: flex;
}
#a > div {
  background-color: red;
  padding: 5px;
  margin: 2px;
}
#b {
  height: auto;
}

<div id="a">
  <div id="b">left</div>
  <div>right<br>right<br>right<br>right<br>right<br></div>
</div>

Answer 1

Le align-items, ou respectivement align-contentattribut contrôle ce comportement.

align-items définit le positionnement des éléments perpendiculairement à flex-direction.

Le défaut flex-direction est row, le placement vertical peut donc être contrôlé avec align-items.

Il y a aussi le align-self attribut pour contrôler l'alignement par article.

#a {
  display:flex;

  align-items:flex-start;
  align-content:flex-start;
  }

#a > div {
  
  background-color:red;
  padding:5px;
  margin:2px;
  }
 #a > #c {
  align-self:stretch;
 }

<div id="a">
  
  <div id="b">left</div>
  <div id="c">middle</div>
  <div>right<br>right<br>right<br>right<br>right<br></div>
  
</div>

css-tricks a un excellent article sur le sujet. Je recommande de le lire plusieurs fois.

Answer 2

Lorsque vous créez un conteneur Flex, différentes règles de flex par défaut entrent en jeu.

Deux de ces règles par défaut sont flex-direction: row et align-items: stretch . Cela signifie que les éléments flexibles s'aligneront automatiquement sur une seule ligne et que chaque élément remplira la hauteur du conteneur.

Si vous ne voulez pas que les éléments flexibles s’étirent - c’est-à-dire comme vous l’avez écrit:

font de sa hauteur le minimum requis pour conserver son contenu

... puis remplacez simplement la valeur par défaut par align-items: flex-start.

#a {
  display: flex;
  align-items: flex-start; /* NEW */
}
#a > div {
  background-color: red;
  padding: 5px;
  margin: 2px;
}
#b {
  height: auto;
}

<div id="a">
  <div id="b">left</div>
  <div>
    right<br>right<br>right<br>right<br>right<br>
  </div>
</div>

Voici une illustration tirée du flexbox spec qui met en évidence les cinq valeurs pour align-items et comment ils positionnent les articles flexibles dans le conteneur. Comme mentionné précédemment, stretch est la valeur par défaut.

^{Source: W3C}