Geschwisterelemente sind im Flex-/Gitter-Layout in der Größe begrenzt

Question

Ich habe zwei Geschwisterelemente, die jeweils dynamischen Inhalt enthalten.

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

In manchen Fällen enthält sibling-1 mehr Inhalt als sibling-2 und umgekehrt. Ich möchte, dass die Höhe des zweiten Elements sibling-2 immer gleich der Höhe des ersten sibling-1 ist. Wenn die Höhe von sibling-2 größer ist als die Höhe von sibling-1, überläuft es das flex-Div und wird scrollbar .

Gibt es eine Möglichkeit, diesen Effekt mit Flexbox zu erzielen?

Answer 1

基本上不行。flex等高特性是基于容器的高度，而不是任何特定的兄弟元素。

所以，兄弟元素1和兄弟元素2总是可以等高。

但是，flexbox没有内置的机制来限制项目的高度与一个兄弟元素的高度相同。

考虑使用JavaScript或CSS定位属性。

这里有一个使用绝对定位的示例：

.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

是的，这是可能的。保留兄弟节点设置的最大高度，将其他节点的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>我更长，会滚动溢出。在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中
      在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在</div>
  </section>

  <section class="limiter">
    <div>每个父节点的兄弟节点与我的高度相匹配。在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中</div>
  </section>

  <section>
    <div>我虽然较短，但仍然与高度相匹配。在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中</div>
  </section>
</main>