How to let the HTML body grow if the content in the dev overflow

ghz 8months ago ⋅ 92 views

How to let the HTML body grow if the content in the dev overflows using flexbox?

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:

Displays correctly if the content is small enough

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:

Overflows but the body does not grow

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.

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;
}
<!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>

Run code snippet

Answers

To make the body grow with the content in the nav-content div, you need to adjust the CSS properties of the nav-container and nav-content. Here's how you can modify your CSS:

body {
    margin: 0; /* Remove default margin */
}

.nav-container {
    width: 100%;
    min-height: 100vh; /* Use min-height instead of height */
    display: flex;
}

.sidenav {
    width: 200px;
    padding-left: 10px;
    background: yellow;
}

.nav-content {
    flex-grow: 1; /* Allow nav-content to grow and fill remaining space */
    background: green;
    overflow-y: auto; /* Add vertical scroll if content overflows */
}

With these changes, the nav-content div will expand to fill the remaining height of the viewport, and if its content exceeds the viewport height, a vertical scrollbar will appear.

Here's the modified HTML and CSS:

<!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>
        <!-- Your content here -->
    </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>

With these changes, your body should grow with the content in the nav-content div.

#css