I've experimented with various methods and it seems like achieving this without JS might not be possible - but before I throw in the towel, I wanted to reach out for help here.
I have a lengthy navigation div on the left side and a column of dynamic content beside it. My main objective is to make the height of the navigation match the content's height and overflow the excess space.
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...
<hr>
<p>To add another layer of complexity, the entire setup is within a modal. So my second goal is to make it functional within a div that has its own overflow: auto property.</p>
<p><div>
<div>
<pre class="lang-js"><code>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>Cookiemonster</div>
<div class="right">Shorter Content...<br>...<br>
<button id="add">+ add more content</button>
<br><-- Navigation div should always end here</div>
</div>I attempted using flexbox, positioning, and various combinations of height properties but had no luck. Any suggestions on how to accomplish this without relying on JavaScript?
And it must be compatible with IE11... :)