Set height of div equal to another div-CodePudding

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.

Hope this helped you

CodePudding user response：

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