Question posted in 
I am creating a project with a side menu using bootstrap 5.
There are 3 elements in my body:
A nav-container that houses the other 2 elements: the sidenav and the nav-content.
To make the nav-content display next to the sidenav I am using flexbox.
To make the sidemenu fill the full height of the screen I am using height: 100vw; on the body element and that works and looks like this:
But if the content to the right of the sidenav in the nav-content becomes more than what is displayed in the current view height it overflows like this:
I tried playing around with flex-grow: 1; but still does not work.
How can I get the body to grow with the content?
I created an HTML and CSS to test this with.
mystyle.css
body {
border: 10px solid blue;
}
.nav-container {
width: 100%;
height: 100vh;
background: #b2bdbd;
display: flex;
}
.sidenav {
width: 200px;
padding-left: 10px;
background: yellow;
}
.nav-content {
width: 100%;
background: green;
}
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<div class="nav-container">
<div class="sidenav">Side Menu</div>
<div class="nav-content">
<h1>If content in this nav-content goes outside of the body, it does not grow the body with it.</h1>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
<div class="contaner"><h1>DummyText from container</h1></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
crossorigin="anonymous"></script>
</body>
</html>
2
Answers
Currently the element has an explicit height:
You can give it a minimum height instead:
This would default to that height when the content doesn’t exceed it, but continue to grow with content that does exceed it.
There are a number of approaches you could take.
1. Scroll the overflow
Set the right panel to
overflow: auto, then it will scroll while the left panel remains stationary.2. Use a grid
Essentially the same as option 1, but I prefer a grid to a flexbox for making full-page layouts. You get to control the layout at the parent level, whereas with flexbox you have to control the children individually.
3. A fixed sidebar
This is an even simpler solution which uses fixed positioning.