html - 一个 flex/网格元素设置 sibling 的大小限制

Question

我有两个兄弟元素，每个元素都包含动态内容。

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

在某些情况下，sibling-1 的内容会比 sibling-2 多，反之亦然。我希望第二个元素 sibling-2 的高度始终等于第一个 sibling-1 的高度。如果 sibling-2 的高度大于 sibling-1 的高度，它将溢出 flex div，因此可以滚动。

有什么方法可以用 Flexbox 来实现吗？

Answer 1

是的，这是可能的。让 sibling 单独设置最大高度并设置其他人的 flex-basis: 0 和 flex-grow: 1，根据规范，这会将它们扩展到他们 sibling 的高度。没有绝对的定位。任何元素都没有设置高度。

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>I'm longer and will scroll my overflow. in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text
      in flow text in flow text in flow text in flow text in flow text in flow text in</div>
  </section>

  <section class="limiter">
    <div>Every parent's siblings match my height. in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text</div>
  </section>

  <section>
    <div>I'm shorter but still match the height. in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text</div>
  </section>
</main>