I have a div (absolute-container) that is absolute positioned to a static positioned parent. My goal is to make absolute-container have a height of the set browser with a max-height ~600px. It's current start position is ~middle of page and I'd like it to extend it to the bottom of browser page and have the height dynamically change if browser size is updated. It's also possible that overflow-scroll-container only contains 3-4 options and div height in this case should not extend to bottom of browser.
.parent {
position: static;
}
.absolute-container {
display: block;
position: absolute;
z-index: 121;
background-color: #FFF;
width: 90vw;
}
.overflow-scroll-container {
overflow-y: scroll;
padding: 4px 8px;
}
.content-footer {
margin: 8px 0;
display: -ms-flexbox;
display: flex;
justify-content: flex-end;
border-top: 1px solid #BECAD6;
}
<div class='parent'>
<button>Example Dropdown</button>
<div class='absolute-container'>
<div class='overflow-scroll-container'>
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
<button>Button 4</button>
<button>Button 5</button>
<button>Button 6</button>
<button>Button 7</button>
<button>Button 8</button>
</div>
<div class='content-footer'>
<button>Reset</button>
<button>Done</button>
</div>
</div>
</div>
