I am sizing the web page to make the lower part has responsive height.
When there is some long content included, I want the nearest flex div to add the scrollbar.
All things works fine to me, until the HTML5 declaration is added. A short demo code is made below to demo this. Try un-commenting the declaration <!DOCTYPE html>, it changes the behaviour to add the scrollbar to the outermost flex div.
I want to know what happens here, and how I can keep the desired behaviour even after adding the HTML5 declaration.
<!-- <!DOCTYPE html> -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>CSS Test</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
function initPage() {
/* responsive sizing */
window.onresize = function() {
$('div.main').each(function(index){
$(this).css('max-height', Math.max(window.visualViewport.height, parseInt($(this).css('min-height')))+'px');
$(this).css('max-width', Math.max(window.visualViewport.width, parseInt($(this).css('min-width')))+'px');
});
};
$(window).resize();
$('.lower_left_col')[0].innerHTML = tableOfRows(Array(100).fill(0).map((x,i)=>rowOfCells([i])));
return;
}
function tableOfRows(rows, useClass='') {return '<table class="'+useClass+'"><tbody>'+rows.join('')+'</tbody></table>';}
function rowOfCells(cells, eid='') {return '<tr eid="'+eid+'"><td>'+cells.join('</td><td>')+'</td></tr>';}
</script>
<style>
div {
display: flex;
border: 0px;
overflow: auto;
}
div.flex_row {
flex-flow: row;
width: 100%;
}
div.flex_col {
flex-flow: column;
height: 100%;
}
</style>
</head>
<body onload="initPage();">
<div class="main flex_col" tabindex="1">
<div class="flex_row" style="flex: 1 1 50%; min-height: 400px;">
Region 1 of 50%, min-height 400px
</div>
<div class="lower flex_row" style="flex: 1 1 50%">
<div class="lower_left flex_col" style="flex: 1 1 50%">
Region 2 for responsive height
<div class="lower_left_col" style="background: #cccccc; width: 300px;"></div>
</div>
<div class="lower_right flex_col" style="flex: 1 1 50%">
Region 3 for responsive height
</div>
</div>
</div>
</body>
</html>
