一个Flex项目设置了兄弟姐妹的身高限制
我有两个兄弟元素，每个都包含dynamic内容。
<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来完成这个任务吗？
有什么办法可以用Flexbox来完成这个任务吗？
基本上没有。 柔性等高度function基于容器的高度，而不是任何特定的兄弟。
所以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>
正如我在评论中提到的，并在其他答案中继续，没有flexbox方法。
可以在第二个兄弟上使用position:absolute ，但是因为这实际上不是flexbox解决scheme，所以这里只是为了提供信息。
.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>
是的，你可以做到这一点，使兄弟姐妹1和2也柔性容器，然后在兄弟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在移动设备上相互堆叠
