I have this minimal exemple. My goal is that :
box1
's height expands with its own contentbox2
's height is always equal tobox1
- If
box2
has more content thanbox1
, a vertical scroll bar is displayed forbox2
(usingoverflow-y : auto
)
I tried solving it with align-items
, overflow-y
, but I couldn't get to the desired result. My aim is not specifiy a max-height
for both boxes, but let it follows that of box1
.
Is there a solution I missed? Thank you!
.row {
display: flex;
flex-direction: row;
}
.box1 {
border: solid black 1px;
flex: 1 0 0;
}
.box2 {
border: solid black 1px;
flex: 1 0 0;
}
<div class="container">
<div class="row">
<div class="box1">
<h3>Box 1 : Height reference</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis pellentesque eros, sit amet finibus odio finibus ullamcorper. Sed eleifend nulla ante, in lacinia nibh dignissim quis. In quis lectus bibendum, efficitur orci at, tincidunt nisl. Sed vehicula dictum rhoncus. Phasellus vehicula nisi eu euismod tempus. Maecenas at pellentesque elit.
</p>
</div>
<div class="box2">
<h3>Box 2 : Follows Box 1's height</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis pellentesque eros, sit amet finibus odio finibus ullamcorper. Sed eleifend nulla ante, in lacinia nibh dignissim quis. In quis lectus bibendum, efficitur orci at, tincidunt nisl. Sed vehicula dictum rhoncus. Phasellus vehicula nisi eu euismod tempus. Maecenas at pellentesque elit. Aenean quis euismod odio. Duis ac sem ut odio vulputate varius ultrices eget lacus.
</p>
<p>
Morbi vitae justo efficitur, mollis arcu eu, fermentum elit. Mauris pretium dui lectus, in vulputate augue porttitor id. Curabitur pharetra consequat ex, ac aliquam nunc sollicitudin eget. Cras eu augue id nulla scelerisque accumsan auctor sed purus. Cras nec sagittis urna. Aliquam dui dolor, hendrerit accumsan maximus sed, congue sed ante. Integer vel vehicula nisi. Aliquam vel efficitur nibh. Etiam euismod aliquam enim, et hendrerit augue sodales tempus. Aliquam quis commodo sapien. Aliquam eu accumsan erat. In in imperdiet elit, eu dictum nulla. Pellentesque egestas malesuada ipsum, vitae euismod ex ultricies at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam non sapien et dui finibus vestibulum. Proin interdum arcu vitae fringilla elementum.
</p>
</div>
</div>
</div>