I have a div (absolute-container) that displays dynamic content (e.g. sometimes there will be 2 button elements or 10 button elements).
I would like absolute-container to have a max-height of 100vh. If I try to set max-height 100vh, it does nothing. If I set height to 100vh, it will always display 100 of vh - which is not what I want because if only 2 buttons are returned I want the div height to change.
How can I achieve this div to have a dynamic height with max vh 100?
.absolute-container {
display: block;
position: absolute;
z-index: 121;
background-color: #FFF;
width: 90vw;
border: 1px solid #BECAD6;
margin-top: 12px;
}
.buttons-container {
overflow-y: scroll;
padding: 4px 8px;
}
<div id='absolute-container'>
<div id='buttons-container'>
<button />
<button />
<button />
<button />
</div>
</div>