一个弯曲项设置兄弟姐妹的身高限制。

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

有什么方法可以用Flexbox实现这一点吗？

基本上没有。FLEX等高特性基于容器的高度，而不是任何特定的同级。

所以sibling-1和sibling-2总是一样高。

但是，柔性盒没有内置的机制来限制项目的高度到一个兄弟姐妹的高度。

考虑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>

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>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>

Answer 3

是的，您可以通过让兄弟姐妹1和2同时使用灵活的容器来实现这一点，然后在兄弟姐妹-2上做一个绝对的div(也是Flex容器)，这将是您的scroll的父级。

<div class="sibling-1 flex sibling"></div><div class="sibling-2 flex sibling">
    <div class="absolute flex scroller-wrap">
        <div class="relative vertical-scroller">
            your content here        </div> 
    </div></div>

CSS：

.relative{
  position:relative;}.absolute{
  position:absolute;}.flex{
  display:flex;}.sibling-2{
  flex:1; }.scroller-wrap{
  height:100%;}

在兄弟姐妹2上，只需在像素上设置最小高度-如果兄弟姐妹1和2在移动上相互叠加，则在响应情况下非常有用。