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/bootstrap@5.3.3/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/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script></body></html>