есть 2 блока в левом текст с картинками, а в правом еще один блок со скролом и картинками:
#main{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
#main .item .side {
display: inline-flex;
align-items: center;
background: url(images/dot-bg.png) #eaac9d;
margin-right: 10px;
}
#main .item .other-side {
display: inline-flex;
align-items: center;
}
.scroll {
height: auto;
position: absolute;
overflow-x: hidden;
overflow-y: scroll;
top: 80px;
bottom: 0;
justify-content: center;
}
<div id="main" style="align-items: flex-start; ">
<div class="column" style="height: 100%; width: calc(50% - 10px); border-right: 2px solid #eaac9d;">
<div class="item" style="display: flex; width: auto;">
<div class="side">
<img src="images/legs.jpg" style=" width: 150px;">
</div>
<div class="other-side">
<div class="inner">
<h2>Hi Welcome to the World.</h2>
Here<strike>we are</strike> I am working hard to make good things for you.<strike>Newest</strike> Select creations are on this page. But you are encouraged to explore deeper. Please enjoy your stay.🌻
</div>
</div>
</div>
</div>
<div class="column" style="width: calc(50% - 10px); border-left: 2px solid #eaac9d; ">
<div class="scroll" style="display: flex; width: auto;">
<ul>
<li>
<img src="images/Group 2.png" style="width: 100%;">
</li>
<li>
<img src="images/Group 1.png" style="width: 100%;">
</li>
<li>
<img src="images/Group 1blue.png" style="width: 100%;">
</li>
<li>
<img src="images/budenist`.png" style="width: 100%;">
</li>
</ul>
</div>
</div>
</div>
можно ли сделать так, чтобы при добавлении информации в левый блок, высота правого блока зависела от высоты левого блока