uneducatedguy uneducatedguy - 3 months ago 11
CSS Question

Height of all flex items in a row doesn't exceed the height of one specific sibling

I have two sibling elements which each contain dynamic content.

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


In some cases
sibling-1
will have more content then
sibling-2
and vice versa.
I would like the height of the second element
sibling-2
always equal the height of the first
sibling-1
. If the height of
sibling-2
is greater then the height of
sibling-1
it will overflow the
flex
div and thus be scrollable.

Is there any way to accomplish this with Flexbox?

Answer

Flexbox can do equal height columns. So sibling-1 and sibling-2 can always be equal height.

However, flexbox does not provide a mechanism that enables sibling-2 to limit its height when it exceeds the height of sibling-1. Consider CSS positioning properties or Javascript.

So the answer to your question...

Is there any way to accomplish this with Flexbox?

would be "no".

Comments