J'ai deux éléments frères, chacun contenant du contenu dynamique.
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 ?
![[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; }