I'm reaching out to you...

I have an overlay (containing two divs), that should take as much height as it needs, but not be larger than the screen. If the content is too large, I will need a scrollbar, but I want the **scrollbar only** for the **second div**.

*HTML*

```
<div class="parent">
  <div class="child1"></div>
  <div class="child2">This div contains a long text, longer than there is space.</div>
</div>

```

*CSS*

```
.parent {
  position: absolute;
  width: 250px;
  max-height: calc(100% - 50px);
  /* overflow-y: auto;*/ -> This would work, but this is not what I want 
}

.child1 {
  width: 100%; -> this is an image that can have different heights
}

.child2 {
  width: 100%;
  overflow-y: auto;
}

```

[JS Fiddle](https://jsfiddle.net/eLpdg0oz/10/)

With all my attempts I only managed to get a scrollbar for the entire parent div, but I only want it for the second div. I'm guessing that the second div does not understand the height of its parent and therefore ignores it.
Is there anyone who knows how to solve this?