Scale overflowing column to smaller one (bootstrap or vanilla css) - css

Question

I've tried several different approaches and I'm pretty sure it's not possible without JS - but before I curl up in a corner I thought I'd give it a try here.
I have one very long navigation div on the left and next to it a column with dynamic content. The first goal is to have the height of the navigation be max the same as the content and overflow the rest.
document.getElementById('add').addEventListener("click", function(e){
e.target.insertAdjacentHTML('afterend', '<br>more dynamic content...');
});
.row {
display: flex;
align-items: flex-start;
}
.left {
background: #ccc;
}
.right {
background: #cc6;
}
<div class="row">
<div class="left">Long Navigation<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>Cookiemonster</div>
<div class="right">Shorter Content...<br>...<br>
<button id="add">+ add more content</button>
<br>...<br>...<br>...<br><-- Navigation div should always end here</div>
</div>
To make it a bit more interesting the whole thing is in a modal. So my second goal is to get it to work in a div that has overflow: auto itself.
document.getElementById('add').addEventListener("click", function(e){
e.target.insertAdjacentHTML('afterend', '<br>more dynamic content...');
});
.modal {
display: flex;
align-items: flex-start;
max-height: 300px;
overflow: auto;
margin: 10px;
border: 10px solid red;
box-shadow: 0 0 15px grey;
}
.left {
background: #ccc;
}
.right {
background: #cc6;
}
<div class="modal">
<div class="left">Long Navigation<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>Cookiemonster</div>
<div class="right">Shorter Content...<br>...<br>
<button id="add">+ add more content</button>
<br>...<br>...<br>...<br><-- Navigation div should always end here</div>
</div>
I tried flexbox, positioning, and any combination of max-height, height and min-height that I could come up with but to no success. Do you have any idea how to achieve this without JS?
Oh, and it has to work in IE11... :)

Answer 1

The only way to do this is to position the navigation absolutely but you would need to give the left div a fixed width
document.getElementById('add').addEventListener("click", function(e) {
e.target.insertAdjacentHTML('afterend', '<br>more dynamic content...');
});
.modal {
max-height: 300px;
overflow: auto;
margin: 10px;
border: 10px solid red;
box-shadow: 0 0 15px grey;
}
.modal-inner { /* add this div so backgrounds don't stop when they hit max-height of modal */
display: flex;
}
.left {
background: #ccc;
position: relative; /* add this and give a fixed width */
width: 200px;
}
.absolute {
/* add a div with this class inside the left column */
position: absolute;
overflow: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.right {
background: #cc6;
flex-grow: 1; /* add this if you want this div to fill the rest of width */
}
<div class="modal">
<div class="modal-inner">
<div class="left">
<div class="absolute">
Long Navigation<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>Cookiemonster</div>
</div>
<div class="right">Shorter Content...<br>...<br>
<button id="add">+ add more content</button>
<br>...<br>...<br>...<br><-- Navigation div should always end here</div>
</div>
</div>