[![enter image description here](https://i.stack.imgur.com/CV0Yx.png)](https://i.stack.imgur.com/CV0Yx.png)

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/>

```css
.container{
  display: flex;
  height: 100%;
}

.left{

  background-color: #f00;
  width: 60%;
  height: 100%;
}

.right{
  background-color: #0f0;
  width: 40%;
}
```

```html
<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>
```