I want the parent element to fill the entire screen, but not exceed it.
I have two child elements, one with a fixed height and one that I want to fill in the rest. But if I do something like this, I get a nasty slider on the page.
The height of the last child element is the same as that of the parent element, so add the height of the first element, and you will surpass the height of the parent element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,body{
height: 100%;
margin: 0;
}
#app{
height: 100%;
}
.navbar{
height: 50px;
background-color: #82e95a;
display: flex;
}
.main{
height: 100%;
display: flex;
background-color: #ae4df7;
}
</style>
</head>
<body>
<div id="app">
<div class="navbar">
navbar
</div>
<div class="main">
main
</div>
</div>
</body>
</html>
