I want to create a layout where a .parent
div has two children, .left
and .right
, both taking up equal halves of the entire width and stacked side by side. The height of the .parent
should be the same as the .left
child, while the .right
child should have the same height as the .left
. Here's an example image:
The yellow box wrapping the two containers is .parent
, which has its content-box height (i.e., without padding, border, margin) equal to .left
. The red box at the left has the height as minimum as possible to wrap the content. The pink box at the right has scrollbars to manage exceeding content.
I've tried using flex
and grid
to create this layout, but I was unsuccessful. Can someone please help me code or explain how I can achieve this layout? Thank you.
You can use display: grid;
and the trick with .right { height: 0; min-height: 100%; }
:
* {
box-sizing: border-box;
}
.wrap {
border: 5px solid yellow;
display: grid;
grid-template-columns: 1fr 1fr;
}
.left {
border: 5px solid red;
}
.right {
min-height: 100%;
height: 0;
overflow: auto;
border: 5px solid blue;
}
<div class="wrap">
<div class="left">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi hic dolor iusto nemo deserunt fuga dolores ullam praesentium nihil molestias!
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis labore beatae ratione illum pariatur voluptates consequatur enim nisi ipsum, assumenda eaque rem dolorem voluptas ducimus! Error debitis est rerum eos quam excepturi optio. Dolorem aut voluptate nulla fugiat autem soluta minus adipisci repellendus delectus pariatur, quis deserunt aliquam expedita dolores corrupti qui veritatis accusantium nobis ad earum distinctio esse quaerat. Voluptatibus ab, earum harum eius architecto aspernatur labore dolorem repudiandae amet. Sequi quidem modi molestiae sapiente! Porro delectus temporibus distinctio architecto, quasi id tenetur eos magni consequatur amet itaque, nostrum vel! Saepe, neque. Suscipit sed velit fugiat quae accusamus fuga?
</div>
</div>