problem description
recently, I found a strange problem when using flex to do the interface. When laying out vertically, there is a fixed height toolbar at the top and a full content container at the bottom (height:100%, and allows scaling). The layout is normal at first.
but there is a problem after putting a height:100% div in the content container. The height of the main container will not be reduced by flex, causing the content to be highly stretched.
related codes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>(runoob.com)</title>
<style>
-sharpmain
{
width:220px;
height:300px;
padding:1px;
box-sizing:border-box;
border:1px solid black;
display:flex;
flex-direction:column;
justify-content:space_between;
align-items:stretch;
}
div
{
box-sizing:border-box;
}
.d1{
width:100%;
height:40px;
margin-bottom:20px;
background-color:coral;
flex-shrink:0;
}
.d2{
height:100%;
padding:5px;
background-color:lightblue;
opacity:0.8
}
.dd2{
height:100%;
background-color:-sharpe1e1e1;
}
</style>
</head>
<body>
<div id="main">
<div class="d1"></div>
<div class="d2">
<div class="dd2"></div>
</div>
</div>
</body>
</html>because the actual use should be uncertain whether the content with the bottom of the top exists, the height of the content container cannot be set to the top. Ask for advice on how to correct this problem? Tell him to stay high.
