One flex/grid item sets the size limit for siblings
Yes, it is possible. Leave the sibling setting the max height alone and set the others' flex-basis: 0 and flex-grow: 1, which according to the spec will expand them to their sibling's height. No absolute positioning. No setting height on any elements.
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>Is there any way to accomplish this with Flexbox?
Basically, no. The flex equal heights feature is based on the height of the container, not any particular sibling.
So sibling-1 and sibling-2 can always be equal height.
But flexbox has no built-in mechanism to limit the height of items to the height of one sibling.
Consider JavaScript or CSS positioning properties.
Here's an example using absolute positioning:
.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
Yes you can accomplish this by making siblings 1 and 2 also flex containers, then on sibling-2 make an absolute div (also flex container) inside that will be the parent of your scroller
<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 just set a minimum height on pixels - useful on responsive cases if siblings 1 and 2 stack each other on mobile
As I mentioned in the comments and has been continued in other answers, there is no flexbox method.
It is possible using position:absolute on the second sibling though...but since that's not actually a flexbox solution, this is here for information only.
.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>