Les éléments frères et sœurs sont de taille limitée dans la disposition flex/grille
P粉134288794
2023-08-24 12:52:48
<p>J'ai deux éléments frères, chacun contenant du contenu dynamique. </p>
<pre class="brush:php;toolbar:false;"><div class="flex">
<div class="sibling-1"></div>
<div class="sibling-2"></div>
</div></pre>
<p>Dans certains cas, <code>sibling-1</code> contiendra plus de contenu que <code>sibling-2</code>, et vice versa.
Je veux que la hauteur du deuxième élément <code>sibling-2</code> soit toujours égale à la hauteur du premier <code>sibling-1</code>. Si la hauteur de <code>sibling-2</code> est supérieure à la hauteur de <code>sibling-1</code>, il débordera du <code>flex</code> . </p>
<p>Existe-t-il un moyen d'obtenir cet effet en utilisant Flexbox ? </p>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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; }jsFiddle
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: 1des 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>