Comment faire en sorte que Flexbox (flex-grow) prenne en compte le contenu pour le dimensionnement ?

Question

Comment faire en sorte que Flexbox cesse d'égaliser l'espace dans les éléments frères lorsque les deux éléments utilisent la fonction flex-grow: 1 . Il est difficile de l'expliquer d'emblée, c'est pourquoi voici le code, suivi de captures d'écran illustrant le problème et le comportement souhaité.

.Parent {
  display: flex;
  flex-direction: column;
  background-color: lightcoral;
  width: 400px;
  min-height: 200px;
}

.Parent>div {
  flex: 1;
}

.child1 {
  background-color: lightblue;
}

.child2 {
  background-color: lightgreen;
}

<div class="Parent">
  <div class="child1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sagittis lorem at odio euismod tincidunt. Proin aliquet velit nec augue venenatis laoreet. Etiam nec metus mi. Aliquam sit amet velit non lectus porttitor accumsan sit amet egestas risus.</div>
  <div class="child2">Lorem ipsum</div>
</div>

La question :

Remarquez l'espace égal sous le contenu de chaque div.

souhaités :

Lorsqu'il y a peu de contenu dans les divs enfants, les divs doivent avoir la même hauteur :

Lorsque l'une des divs a beaucoup de contenu, je m'attends à ce que la div ayant le plus de contenu ne soit pas plus haute que le contenu (si elle dépasse l'allocation de croissance flexible d'origine).

Comment puis-je obtenir ce comportement ? Il semble que cela devrait être facile en utilisant Flexbox.

Answer 1

flex-basis est le bien que vous recherchez. https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis

La propriété CSS flex-basis spécifie la base de flexion qui est la taille principale initiale d'un élément de flexion. Cette propriété détermine la taille de la boîte de contenu, sauf indication contraire à l'aide de la fonction "box-sizing".

Par défaut, flex prend en compte le contenu de l'élément lorsqu'il calcule flex-grow - pour le désactiver, il suffit de spécifier flex-basis: 0

.Parent {
  display: flex;
  flex-direction: column;
  background-color: lightcoral;
  width: 400px;
  min-height: 200px;
}

.Parent>div {
  flex-grow: 1;
  flex-basis: 0;
}

.child1 {
  background-color: lightblue;
}

.child2 {
  background-color: lightgreen;
}

<div class="Parent">
  <div class="child1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sagittis lorem at odio euismod tincidunt. Proin aliquet velit nec augue venenatis laoreet. Etiam nec metus mi. Aliquam sit amet velit non lectus porttitor accumsan sit amet egestas risus. Etiam nec metus mi. Aliquam sit amet velit non lectus porttitor accumsan sit amet egestas risus </div>
  <div class="child2">Lorem ipsum</div>
</div>

Answer 2

En fixant min-height en .Parent (ainsi que le réglage de la flex-direction à column ), vous incitez le navigateur à remplir l'espace avec des descendants directs de .Parent . Il le fait en répartissant l'espace entre tous les éléments de manière égale (c'est la caractéristique de Flexbox).

Si vous ne voulez pas de ce comportement, supprimez l'option min-height de .Parent et fixer un min-height en .Parent > div éléments.

.Parent {
  display: flex;
  flex-direction: column;
  background-color: lightcoral;
  width: 400px;
}

.Parent>div {
  flex: 1;
  min-height: 100px;
}

.Parent > div:nth-child(odd) {
  background-color: lightblue;
}

.Parent > div:nth-child(even) {
  background-color: lightgreen;
}

<div class="Parent">
  <div class="child1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sagittis lorem at odio euismod tincidunt. Proin aliquet velit nec augue venenatis laoreet. Etiam nec metus mi. Aliquam sit amet velit non lectus porttitor accumsan sit amet egestas risus. Nullam sagittis lorem at odio euismod tincidunt. Proin aliquet velit nec augue venenatis laoreet. Etiam nec metus mi. Aliquam sit amet velit non lectus porttitor accumsan sit amet egestas risus.</div>
  <div class="child2">Lorem ipsum</div>
  <div>Lorem ipsum doler sit amet</div>
  <div>When there is little content in the children divs, the divs should be of equal height.</div>
</div>