一个 flex/grid 项目设置兄弟姐妹的大小限制

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

对的，这是可能的。 让兄弟姐妹单独设置最大高度，并设置其他人的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 2

有什么方法可以用 Flexbox 完成这个吗？

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

所以sibling-1和sibling-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 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%;
}

在兄弟 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

我根据朗讯的回答简化了（至少对我而言）代码片段：

 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>