.container {
padding: 10px;
display: flex;
width: 80vw;
justify-content: space-between;
margin: 0 auto;
margin-top: 20px;
background: green;
}
.item_1 {
max-height: 100%;
/*max-height: 1200px;(it can be >.item_2)*/
width: 200px;
overflow-y: scroll;
background: orange;
}
.item_2 {
height: 800px;
width: 800px;
background: orange
}
<div>
<div class='container'>
<div class='item_1'></div>
<div class='item_2'></div>
</div>
</div>
I need to set max-height of .container(green on image) == height of .item_2(orange).
If .item_1 > .item_2 i need to add scroll bar on .item_1. (third image);
If .item_1 <= .item_2 nothing special(just equal size of blocks)
How can i do it?