uneducatedguy uneducatedguy - 1 year ago 279
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>

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

Is there any way to accomplish this with Flexbox?

Answer Source

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".