一个 flex/grid item 设置了兄弟姐妹的大小限制 [英] One flex/grid item sets the size limit for siblings

问题描述

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

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

在某些情况下，sibling-1 的内容会比 sibling-2 多，反之亦然.我希望第二个元素 sibling-2 的高度总是等于第一个 sibling-1 的高度.如果 sibling-2 的高度大于 sibling-1 的高度，它会溢出 flex div 从而可以滚动.>

有什么办法可以用 Flexbox 实现这一点吗?

解决方案

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

main {显示:弹性；}部分 {显示:弹性；弹性方向:列；宽度:7em；边框:薄纯黑色；边距:1em；}:not(.limiter)>div {弹性基础:0px；弹性增长:1；溢出-y:自动；}

<部分><div>我更长，将滚动我的溢出.在流文本中流文本中流文本中流文本中流文本中流文本中流文本中流文本中流文本中流文本中流文本中流文本中流文本中流文本中流文本中流文本中流文本中流文本中流文本中流文本中流文本中流文本中流文本中流文本中流文本流中的文本 流中的文本在流文本中 在流文本中 在流文本中 在流文本中 在流文本中 在流文本中

</节><section class="limiter"><div>每个父母的兄弟姐妹都和我的身高相匹配.在流文本中流文本中流文本中流文本中流文本中流文本中流文本中流文本中流文本中流文本中流文本中流文本中流文本中流文本中流文本中流文本中流文本中流文本中流文本中流文本中流文本中流文本中流文本中流文本中流文本文本

</节><部分><div>我更矮，但仍然匹配高度.在流文本中在流文本中在流文本中在流文本中在流文本中在流文本中在流文本中在流文本中在流文本中</节></main>

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?

解决方案

Yes, it is possible. Leave the sibling setting the max height alone and set the others' flex-basis: 0 and flex-grow: 1, which according to the spec will expand them to their sibling's height. No absolute positioning. No setting height on any elements.

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>

这篇关于一个 flex/grid item 设置了兄弟姐妹的大小限制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！