Les éléments frères et sœurs sont de taille limitée dans la disposition flex/grille

Question

J'ai deux éléments frères, chacun contenant du contenu dynamique.

<div class="flex">
    <div class="sibling-1"></div>
    <div class="sibling-2"></div>
</div>

Dans certains cas, sibling-1 contiendra plus de contenu que sibling-2, et vice versa. Je veux que la hauteur du deuxième élément sibling-2 soit toujours égale à la hauteur du premier sibling-1. Si la hauteur de sibling-2 est supérieure à la hauteur de sibling-1, il débordera du flex .

Existe-t-il un moyen d'obtenir cet effet en utilisant Flexbox ?

Answer 1

En gros non. La fonction de hauteur flexible est basée sur la hauteur du conteneur et non sur des éléments frères spécifiques.

Ainsi, l'élément frère 1 et l'élément frère 2 peuvent toujours être de la même hauteur.

Cependant, flexbox n'a pas de mécanisme intégré pour contraindre un élément à avoir la même hauteur qu'un élément frère.

Envisagez d'utiliser les propriétés de positionnement JavaScript ou CSS.

Voici un exemple utilisant le positionnement absolu :

.flex {
  display: flex;
  width: 200px;
  position: relative;
}

.flex>div {
  flex: 0 0 50%;
  border: 1px solid black;
  box-sizing: border-box;
}

.sibling-2 {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
}

<div class="flex">
  <div class="sibling-1">text<br>text<br>text<br>text<br>text<br>text<br></div>
  <div class="sibling-2">text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br></div>
</div>

jsFiddle

Answer 2

Oui, c'est possible. Conservez la hauteur maximale définie par le nœud frère et définissez le flex-basis: 0和flex-grow: 1 des autres nœuds de telle sorte que, par spécification, ils s'étendent à la même hauteur que le frère frère. Il n’y a pas de positionnement absolu. Aucune hauteur n'est définie sur aucun élément.

main {
  display: flex;
}

section {
  display: flex;
  flex-direction: column;
  width: 7em;
  border: thin solid black;
  margin: 1em;
}

:not(.limiter)>div {
  flex-basis: 0px;
  flex-grow: 1;
  overflow-y: auto;
}

<main>
  <section>
    <div>我更长，会滚动溢出。在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中
      在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在</div>
  </section>

  <section class="limiter">
    <div>每个父节点的兄弟节点与我的高度相匹配。在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中</div>
  </section>

  <section>
    <div>我虽然较短，但仍然与高度相匹配。在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中</div>
  </section>
</main>