Do you know why the .wrap-max-height is not working properly?
I am expecting it to be limited by 100vh - 108px and for .ins to be scrollable if needed.
Any assistance would be greatly appreciated!
$('button').on('click', function(){
let a = "<div class='abc'>ABC</div>";
$(a).appendTo($('#ins'));
});.wrap{
position:fixed;
left:50%;
top:54px;
transform:translateX(-50%);
max-height:calc(100vh - 108px);
background:silver;
overflow:hidden;
}
.title{background:gold;}
.bottom{margin-top:5px;}
.sub{background:orange;}
.ins{overflow-y:scroll;}
.abc{background:lightgreen;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>CLICK</button>
<div class='wrap'>
<div class='title'>LOREM</div>
<div class='bottom'>
<div class='sub'>IPSUM</div>
<div class='ins' id='ins'>
<div class='abc'>ABC</div>
</div>
</div>
</div>