How to make two inner divs vertically grow together while outer div handles vertical overflow?

I have an outer div that has a max-height and overflow-y: auto.

Inside it are two divs side by side that may vertically due to the content inside either one of them.

The left div has a grey background and the right div has a white background.

I need both divs to grow vertically, but theyre constrained by the max-height I set on my outer div.

I want the left div and right div to expand vertically but there only be one scroll bar (on the outer div)

Here is the HTML:

<div class="outer"><div class="inner-left"><div>Left Content</div><div>Left Content</div><div>Left Content</div><div>Left Content</div><div>Left Content</div><div>Left Content</div><div>Left Content</div><div>Left Content</div><div>Left Content</div><div>Left Content</div><div>Left Content</div></div><div class="inner-right">      Right Content</div></div>

Here is the CSS:

.outer {  display: flex;  overflow-y: auto;  max-height: 100px;  border: 1px solid black;  padding: 16px;}.inner-left {  background-color: grey;  width: 50%;}.inner-right {  background-color: white;  width: 50%;}

Here is a JSFiddle link: https://jsfiddle.net/mux67o34/

As you can see, the grey background of the left div doesn't go down to the bottom of the outer div