Set height of div equal to another div - css

Question

How can we set height of green box equal to the height of red box with scroll in green box. Please note that we cannot set height of red box, it is dynamic and may be changed as content changes.
https://jsfiddle.net/guqfz069/13/
.container{
display: flex;
height: 100%;
}
.left{
background-color: #f00;
width: 60%;
height: 100%;
}
.right{
background-color: #0f0;
width: 40%;
}
<div class="container">
<div class="left">
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
</div>
<div class="right">
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
</div>
</div>

Answer 1

with position and absolute for .right you can do that
.container{
display: flex;
height: 100%;
position: relative;
}
.left{
background-color: #f00;
width: 60%;
height: 100%;
}
.right{
background-color: #0f0;
width: 40%;
position: absolute;
right: 0;
height: 100%;
overflow-y: auto;
}
<div class="container">
<div class="left">
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
</div>
<div class="right">
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
</div>
</div>

Answer 2

You can do this:
.container {
display: flex;
width: 100%;
}
.container>* {
flex: 1;
}
.left {
background-color: #f00;
width: 60%;
}
.right {
background-color: #0f0;
width: 40%;
}
<div class="container">
<div class="left">
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
</div>
<div class="right">
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
</div>
</div>
DEMO HERE: https://jsfiddle.net/ayL75j4h/

Answer 3

I would use CSS Grid to achieve this effect.
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
height: 100%;
}
This will make a grid with two columns, one for .left, one for .right with the same width & height; The fr (fractional unit) makes sure of that.
Let me know if this helps you

Answer 4

If you add align-items: flex-start and maybe add height: 100%; to child elements?

Answer 5

Use-->> max-height:130px; overflow:auto; -->> in both class left and right,
like this
.left{
background-color: #f00;
width: 60%;
height: 100%;
max-height:130px;
overflow:auto
}
.right{
background-color: #0f0;
width: 40%;
max-height:130px;
overflow:auto
}
and u will get this
Hope this helped you

Answer 6

Add height:auto to .left
.left{
background-color: #f00;
width: 60%;
height: auto;
}
UPDATE
Based on #Riz's comment
I believe we'll need some js to achieve this
const leftHeight = document.querySelector('.left').offsetHeight;
document.querySelector('.right').style.height = `${leftHeight}px`;
since offsetHeight includes margin and padding, it'll be better if box-sizing: border-box is set