Why does my
element always overflow in Bootstrap 5?

Question

I have a element in my interface with quite a lot of elements. As soon as the list extends over a entire screen, a scrollbar should appear in the list. The element is set to take up the remaining height space in the Right column via flex-grow. Without the list elements, the element fills the remaining height perfectly. however, as soon as there are too many elements for one screen in the element, the entire tag and thus screen overflows.

The <div id=content"> element overflows in height over the space of the <body> element althoug I set the bodies max-height property to 100vh which seems off to me.

Here is a small example with my code: Codepen

How can I adjust the code to display the element with many elements showing scrollbars on the y-axis?

html,
body {
  height: 100vh;
  max-height: 100vh;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>CSV Parser Tool</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- BOOTSTRAP CSS & JS-->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
  <!-- PLOTLY JS -->
  <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>

<body class="h-100 d-flex flex-column">

  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <a class="navbar-brand" href="#">Title</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-item nav-link" href="#">Link 1</a>
        <a class="nav-item nav-link" href="#">Link 1</a>
        <a class="nav-item nav-link" href="#">Link 1</a>
        <a class="nav-item nav-link" href="#">Link 1</a>
      </div>
    </div>
    <div class="d-flex">
      <a class="btn btn-danger mr-xl-3 mr-l-3" href="{{ url_for('reset') }}" role="button">Reset</a>
    </div>
  </nav>

  <div id="content" class="flex-grow-1 container-fluid">
    <div class="row h-100">
      <div class="col-xl-6 h-100">
        <div class="container-fluid h-100">
          <h2>File Picker</h2>
        </div>
      </div>

      <div class="col-xl-6 h-100">
        <div class="container-fluid h-100 d-flex flex-column">
          <h2>This is my overflowing list view</h2>

          <div class="flex-grow-1">
            <ul class="overflow-scroll">
              <li class="list-group-item">Element</li>
              <li class="list-group-item">Element</li>
              <li class="list-group-item">Element</li>
              <li class="list-group-item">Element</li>
              <li class="list-group-item">Element</li>
              <li class="list-group-item">Element</li>
              <li class="list-group-item">Element</li>
              <li class="list-group-item">Element</li>
              <li class="list-group-item">Element</li>
              <li class="list-group-item">Element</li>
              <li class="list-group-item">Element</li>
              <li class="list-group-item">Element</li>
              <li class="list-group-item">Element</li>
              <li class="list-group-item">Element</li>
              <li class="list-group-item">Element</li>
              <li class="list-group-item">Element</li>
              <li class="list-group-item">Element</li>
              <li class="list-group-item">Element</li>
              <li class="list-group-item">Element</li>
              <li class="list-group-item">Element</li>
              <li class="list-group-item">Element</li>
              <li class="list-group-item">Element</li>
              <li class="list-group-item">Element</li>
              <li class="list-group-item">Element</li>
              <li class="list-group-item">Element</li>
              <li class="list-group-item">Element</li>
              <li class="list-group-item">Element</li>
              <li class="list-group-item">Element</li>
              <li class="list-group-item">Element</li>
              <li class="list-group-item">Element</li>
              <li class="list-group-item">Element</li>
              <li class="list-group-item">Element</li>
              <li class="list-group-item">Element</li>
              <li class="list-group-item">Element</li>
              <li class="list-group-item">Element</li>
              <li class="list-group-item">Element</li>
              <li class="list-group-item">Element</li>
              <li class="list-group-item">Element</li>
              <li class="list-group-item">Element</li>
              <li class="list-group-item">Element</li>
              <li class="list-group-item">Element</li>
              <li class="list-group-item">Element</li>
              <li class="list-group-item">Element</li>
              <li class="list-group-item">Element</li>
              <li class="list-group-item">Element</li>
              <li class="list-group-item">Element</li>
              <li class="list-group-item">Element</li>
            </ul>
          </div>

        </div>
      </div>
    </div>
  </div>
</body>

</html>

Does your question about not able to scroll with all the items? I think you should just add a specific height for the overflow-scroll container. — MarLMazo, Feb 09 '21 at 17:24
vh's are like percentages. 100vh is the full height. 1vh is about 5px — ShanieMoonlight, Feb 09 '21 at 17:27
@MarLMazo Thats right, I want the items to be scrollable.Therfore I want the `
` elemement to take the remaining height of the right column instead of setting it to a specific height using fixed pixel or percent measures. — JohnDizzle, Feb 09 '21 at 17:28
@Shanie Thanks for the notice, I will correct that. But it seems that this doesn´t change anything... — JohnDizzle, Feb 09 '21 at 17:30

score 0 · Answer 1 · answered Feb 09 '21 at 17:49

0

I was able to solve the problem using this answer by adding a min-height=0 property to the flex-grow parent and child elements.

answered Feb 09 '21 at 17:49

JohnDizzle

1,268
3
24
51

score -3 · Answer 2 · edited Feb 10 '21 at 08:41

-3

<div class=""> 
  <ul> 
    <li><a href="#">Element</a></li>
    <li><a href="#">Element</a></li>
  </ul> 
</div>

edited Feb 10 '21 at 08:41

Pranav Rustagi

2,604
1
5
18

answered Feb 09 '21 at 17:39

Razvan Constantin

30
5

1

Please add some explanation to your answer such that others can learn from it – Nico Haase Feb 09 '21 at 22:11

Why does my element always overflow in Bootstrap 5?

2 Answers2

Why does my
element always overflow in Bootstrap 5?