Sibling items are limited in size in flex/grid layout

Question

I have two sibling elements, each containing dynamic content.

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

In some cases, sibling-1 will contain more content than sibling-2, and vice versa. I want the height of the second element sibling-2 to always be equal to the height of the first sibling-1. If the height of sibling-2 is greater than the height of sibling-1, it will overflow the flex div and become scrollable.

Is there a way to achieve this effect using Flexbox?

Answer 1

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>

jsFiddle

Answer 2

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>