<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
html, body {
height: 100%;
width: 100%;
box-sizing: border-box;
}
.root {
height: 100%;
background: -sharp123456;
display: flex;
flex-direction: column;
}
.header, .footer {
flex: 0 0 50px;
border: 5px dashed red;
}
.body {
display: flex;
flex: 1;
}
.center {
flex: 1;
border: 5px dashed gold;
overflow: auto;
}
.content {
height: 1000px;
border: 5px dashed cornflowerblue;
}
.left {
flex: 0 0 300px;
border: 5px dashed greenyellow;
}
</style>
</head>
<body style="margin:0">
<div class="root">
<div class="header">header</div>
<dvi class="body">
<div class="left">
left
</div>
<div class="center">
<div class="content">
</div>
</div>
</dvi>
<div class="footer">footer</div>
</div>
</div>
</body>
</html>
when I use flex to lay out the Grail, content sets the height, and when the parent sets overflow: auto , chrome becomes normal, but firefox will push the height out, as shown in the following figure
.