一个弹性项目设置了兄弟姐妹的身高限制

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将溢出flexdiv，因此可以滚动。

有什么方法可以通过Flexbox做到这一点？

Answer 1

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

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>