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

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

  

有没有办法用Flexbox实现这个目标？

基本上没有。柔性相等高度特征基于容器的高度，而不是任何特定的兄弟。

所以sibling-1和sibling-2总是相等的高度。

但是flexbox没有内置机制来限制项目的高度到一个兄弟的高度。

考虑JavaScript或CSS定位属性。

这是一个使用绝对定位的例子：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

jsFiddle

Answer 2

是的，有可能。让兄弟姐妹单独设置最大高度，并设置其他人if(JOptionPane.showInputDialog("does it match: ").trim().equalsIgnoreCase("yes")) { //your code } 和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;
}

Answer 3

是的，您可以通过让兄弟姐妹1和2也使用flex容器来实现这一点，然后在兄弟2上创建一个绝对div（也就是flex容器），它将成为你的卷轴的父级

<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%;
}

on sibling 2只是设置像素的最小高度 - 如果兄弟姐妹1和2在移动设备上相互堆叠，则对响应案例很有用

Answer 4

正如我在评论中提到的并且在其他答案中一直在继续，没有flexbox方法。

虽然可以在第二个兄弟上使用position:absolute但是因为那不是实际上一个flexbox解决方案，所以这里仅供参考。

.flex {
  margin: 1rem auto;
  position: relative;
  display: flex;
}
.sibling-1 {
  flex: 0 0 50%;
}
.sibling-2 {
  position: absolute;
  right: 0;
  width: 50%;
  height: 100%;
  overflow: auto;
}

* {
  margin: 0;
  outline: 0;
}
.flex {
  width: 80%;
  margin: 1rem auto;
  border: 1px solid grey;
  position: relative;
  display: flex;
}
.sibling-1 {
  flex: 0 0 50%;
}
.sibling-2 {
  position: absolute;
  right: 0;
  width: 50%;
  height: 100%;
  overflow: auto;
}

<div class="flex">
  <div class="sibling-1">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore quia, voluptatum! Perspiciatis praesentium nemo, labore mollitia numquam recusandae voluptatem consectetur amet deleniti cum nesciunt blanditiis, esse quis doloremque vero! Reiciendis
      porro impedit perspiciatis. Amet in praesentium molestias ipsum ad quis quia doloribus, veniam unde, ea ducimus rerum porro tenetur voluptatem, a laudantium. Accusantium provident voluptatibus perferendis hic blanditiis laborum amet consequatur
      esse, fugiat doloremque consectetur ullam sequi, ratione perspiciatis, voluptatem eaque vitae rem repellendus in architecto vel nulla animi neque. Accusantium animi voluptatum, suscipit possimus,</p>
  </div>
  <div class="sibling-2">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque modi quibusdam aliquam officia illo itaque ratione, iste architecto ad blanditiis fugiat sequi laborum cupiditate voluptatum, autem non? Quibusdam ad eius hic rem id. Libero, tempora
      dicta reiciendis placeat nihil quia fuga iste aliquid quo minus labore sapiente fugit, similique non aliquam, beatae pariatur nobis fugiat! Ipsam nobis fugit maxime aliquam accusamus explicabo nostrum ab nemo adipisci dolorem qui porro ea pariatur
      corporis aut reiciendis optio, sint eum nam suscipit itaque aspernatur recusandae. Cumque qui quod doloremque. Ut voluptates, asperiores, laborum excepturi quam odit, quos rerum assumenda sapiente saepe nisi? Numquam placeat repellat eum dolorem
      reprehenderit dolores culpa id explicabo consequuntur. Quas nobis veritatis tempora animi similique earum commodi, laborum blanditiis dolor illo, eaque accusamus aliquid nam a ex, velit, maiores natus. Id totam ullam corporis. Repellat aperiam,
      distinctio maxime, dolorum illum labore recusandae. Sequi repellendus provident deserunt amet culpa, ratione dignissimos! Quibusdam delectus mollitia, ducimus. Error id architecto, ea molestias voluptate impedit inventore amet ducimus modi repellat
      in. Asperiores soluta veritatis id eius, distinctio nisi voluptates voluptatibus iste iusto error officia tempore! Ducimus sed commodi quisquam provident iure voluptatum aliquam, nobis rem dolore, consectetur, dolor rerum eum nam adipisci, libero
      beatae eaque aliquid sapiente? Eius, earum quas nostrum quasi reiciendis officia quaerat omnis. Cupiditate suscipit et tempora quibusdam perspiciatis eius cum, nisi facere animi. Delectus magnam inventore ipsum, veritatis reiciendis. Ipsum adipisci
      recusandae, similique quas labore voluptas animi eaque velit, alias eveniet qui libero obcaecati suscipit, quam nihil quos placeat.</p>
  </div>
</div>

Answer 5

从你的代码来看，为了避免额外的包装，一边是粘性的，一边是高度：0，然后是溢出：父级上的自动也可以使用 flex 来完成这项工作：

例子（你会很容易理解）

.flex {
  display: flex;
  
  /* demo purpose */
  width: 500px;
  border: solid;
  overflow: auto;/* make the parent scroll */
  gap:0.5em;
}



.flex .sibling-1 {
  position: sticky;/* stick the reference for the height */
  top: 0;
}

.flex .sibling-2 {
  height: 0;/* give it no height to start from and let the parent show the scrollbar */
}

<div class="flex">
  <div class="sibling-1">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
      lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
      facilisis luctus, metus</p>
  </div>
  <div class="sibling-2">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
      lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
      facilisis luctus, metus</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
      lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
      facilisis luctus, metus</p>
  </div>
</div>

Answer 6

基于Lucent's answer的我的简化代码段（至少对我来说）：

main {
  display: flex;
  font-family: "nunito"
}

section1 {
  display: flex;
  flex-direction: column;
  width: 15rem;
  border: thin solid gray;
}

section2 {
  display: flex;
  flex-direction: column;
  width: 15rem;
  border: thin solid gray;
}

section1 > div {
  flex-basis: 0px;
  flex-grow: 1;
  overflow-y: auto;
}

<main>
  <section1 class="scroll">
    <div>I'm a div in section 1 ---
      I have extra css rules of flex-basis 0px (making me as small as possible), flex 1 (making me fill up available space), and overflow y auto (making me scroll the extra content) --- My parent section 1 is a flex column --- My grandparent main is a flex row ---</div>
  </section1>

  <section2>
    <div>I'm a div in section 2. --- My parent section 2 is a flex column --- My grandparent main is a flex row --- The height of the div in section 1 will adjust to my height.</div>
  </section2>

</main>