P粉3229187292023-08-25 11:16:32
Basically not possible. The flex height feature is based on the height of the container, not any specific sibling elements.
So, brother element 1 and brother element 2 can always be of the same height.
However, flexbox has no built-in mechanism to constrain an item to be the same height as a sibling element.
Consider using JavaScript or CSS positioning properties.
Here is an example using absolute positioning:
.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>
P粉0088297912023-08-25 09:49:37
Yes, it is possible. Retain the maximum height set by the sibling node, and set the other nodes' flex-basis: 0
and flex-grow: 1
to, according to the specification, they will expand to the same height as the sibling node high. There is no absolute positioning. No height is set on any element.
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>