Saturday

Why are my divs not handling overflow properly when using overflow-y scroll?

10:36 PM bootstrap-5, css, html No comments

Issue

I have a sidebar and content area that are two columns, I want them to have responsive height to fill the screen rather than a fixed height as I don't know an exact size (i.e. if a page banner shows up, the layout should respond appropriately).

I've tried setting overflow-y scroll on the tab-content container and tab-panes individually, as well as heights and max heights, but no matter what I do if a tab-pane holds too many items it will spill out and cause the whole page to scroll, rather than add a scrollbar only to the tab pane.

I've created an example in JS Fiddle. You can see that in the overview section with very few inputs there is no scrollbar, but in a large section like section 4, a page scrollbar is added because the overflow is not contained. This leads to the sidebar being scrolled as well and is generally a mess.

I'm looking for a way to contain the content to the maximum space available on the screen, but I cannot use px or view-height values, as it needs to be responsive. For example, any fix should not push content off the screen when the alert div is uncommented.

https://jsfiddle.net/ezcnfLvg/22/

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<body>

  <style>
    body {
    display: flex;
    height: 100vh;
    flex-direction: column;
  }
  .sidebar {
    max-width: 18rem;
  }

  .tab-content {
    overflow-y: scroll !important;
    max-height: 99%;
    height: 99%;
  }

  .tab-pane {
    overflow-y: scroll !important;
    /* max-height: 99%; */
    /* height: 99%; */
  }
  </style>

  <!-- <div class="alert alert-primary my-0" role="alert">
    Uncomment me to see if I break the formatting!
  </div> -->
  
  <div class="container-fluid flex-grow-1 row">
    <nav class="col-auto sidebar px-2 bg-dark">
    <ul class="nav flex-column nav-pills mx-3" role="tablist" aria-orientation="vertical">
        <li class="nav-item">
            <a class="nav-link  active" id="sidebar_overview" data-bs-toggle="pill" data-bs-target="#section_overview" type="button" role="tab" aria-controls="section_overview" aria-selected="true">
                Overview
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link " id="sidebar_section2" data-bs-toggle="pill" data-bs-target="#section2" type="button" role="tab" aria-controls="section2" aria-selected="false">
                Section2
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link " id="sidebar_section3" data-bs-toggle="pill" data-bs-target="#section3" type="button" role="tab" aria-controls="section3" aria-selected="false">
              Section3
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link " id="sidebar_section4" data-bs-toggle="pill" data-bs-target="#section4" type="button" role="tab" aria-controls="section4" aria-selected="false">
            Section4
            </a>
        </li>
      </ul>
    </nav>
  
    <form action="" class="col tab-content">
      <fieldset class="tab-pane fade show col ms-5 mt-4 active" id="section_overview" role="tabpanel">
          <legend>Overview</legend>
          <hr>
  
          <label for="">Some Value</label>
          <input type="text" class="form-control">
          <label for="">Some Value</label>
          <input type="text" class="form-control">
          <label for="">Some Value</label>
          <input type="text" class="form-control">
          <label for="">Some Value</label>
      </fieldset>
  
      <fieldset class="tab-pane fade col ms-5 mt-4" id="section2" role="tabpanel">
          <legend>Section 2</legend>
          <hr>
  
          <label for="">Some Value</label>
          <input type="text" class="form-control">
          <label for="">Some Value</label>
          <input type="text" class="form-control">
          <label for="">Some Value</label>
          <input type="text" class="form-control">
          <label for="">Some Value</label>
          <input type="text" class="form-control">
          <label for="">Some Value</label>
          <input type="text" class="form-control">
          <label for="">Some Value</label>
          <input type="text" class="form-control">
          <label for="">Some Value</label>
          <input type="text" class="form-control">
          <label for="">Some Value</label>
          <input type="text" class="form-control">
      </fieldset>
  
      <fieldset class="tab-pane fade col ms-5 mt-4" id="section3" role="tabpanel">
          <legend>Section 3</legend>
          <hr>
  
          <label for="">Some Value</label>
          <input type="text" class="form-control">
          <label for="">Some Value</label>
          <input type="text" class="form-control">
          <label for="">Some Value</label>
          <input type="text" class="form-control">
          <label for="">Some Value</label>
          <input type="text" class="form-control">
          <label for="">Some Value</label>
          <input type="text" class="form-control">
          <label for="">Some Value</label>
          <input type="text" class="form-control">
          <label for="">Some Value</label>
          <input type="text" class="form-control">
          <label for="">Some Value</label>
          <input type="text" class="form-control">
      </fieldset>
  
      <fieldset class="tab-pane fade col ms-5 mt-4" id="section4" role="tabpanel">
          <legend>Section 4</legend>
          <hr>
  
          <label for="">Some Value</label>
          <input type="text" class="form-control">
          <label for="">Some Value</label>
          <input type="text" class="form-control">
          <label for="">Some Value</label>
          <input type="text" class="form-control">
          <label for="">Some Value</label>
          <input type="text" class="form-control">
          <label for="">Some Value</label>
          <input type="text" class="form-control">
          <label for="">Some Value</label>
          <input type="text" class="form-control">
          <label for="">Some Value</label>
          <input type="text" class="form-control">
          <label for="">Some Value</label>
          <input type="text" class="form-control">

          <legend>Subsection 4</legend>
          <hr>

          <label for="">Some Value</label>
          <input type="text" class="form-control">
          <label for="">Some Value</label>
          <input type="text" class="form-control">
          <label for="">Some Value</label>
          <input type="text" class="form-control">
          <label for="">Some Value</label>
          <input type="text" class="form-control">
          <label for="">Some Value</label>
          <input type="text" class="form-control">
          <label for="">Some Value</label>
          <input type="text" class="form-control">
          <label for="">Some Value</label>
          <input type="text" class="form-control">
          <label for="">Some Value</label>
          <input type="text" class="form-control">

          <br>


          <label for="">Some Value</label>
          <input type="text" class="form-control">
          <label for="">Some Value</label>
          <input type="text" class="form-control">
          <label for="">Some Value</label>
          <input type="text" class="form-control">
          <label for="">Some Value</label>
          <input type="text" class="form-control">
          <label for="">Some Value</label>
          <input type="text" class="form-control">
          <label for="">Some Value</label>
          <input type="text" class="form-control">
          <label for="">Some Value</label>
          <input type="text" class="form-control">
          <label for="">Some Value</label>
          <input type="text" class="form-control">

          <br>
          <span class="fs-4">The End of Section 4</span>
      </fieldset>
  
    </form>
  </div>
  
</body>

Solution

This is because you are using % to set the height of the div.

Make the following adjustments:

To the body add overflow-y:hidden;
To the .tab-content change height and max-height to 99vh instead of 99%.

Working example:

body {
  display: flex;
  height: 100vh;
  flex-direction: column;
  overflow-y: hidden;
}

.sidebar {
  max-width: 18rem;
}

.tab-content {
  overflow-y: scroll !important;
  max-height: 99vh;
  height: 99vh;
}

.tab-pane {
  overflow-y: scroll !important;
  /* max-height: 99%; */
  /* height: 99%; */
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<body>
  <!-- <div class="alert alert-primary my-0" role="alert">
    Uncomment me to see if I break the formatting!
  </div> -->

  <div class="container-fluid flex-grow-1 row">
    <nav class="col-auto sidebar px-2 bg-dark">
      <ul class="nav flex-column nav-pills mx-3" role="tablist" aria-orientation="vertical">
        <li class="nav-item">
          <a class="nav-link  active" id="sidebar_overview" data-bs-toggle="pill" data-bs-target="#section_overview" type="button" role="tab" aria-controls="section_overview" aria-selected="true">
                Overview
            </a>
        </li>
        <li class="nav-item">
          <a class="nav-link " id="sidebar_section2" data-bs-toggle="pill" data-bs-target="#section2" type="button" role="tab" aria-controls="section2" aria-selected="false">
                Section2
            </a>
        </li>
        <li class="nav-item">
          <a class="nav-link " id="sidebar_section3" data-bs-toggle="pill" data-bs-target="#section3" type="button" role="tab" aria-controls="section3" aria-selected="false">
              Section3
            </a>
        </li>
        <li class="nav-item">
          <a class="nav-link " id="sidebar_section4" data-bs-toggle="pill" data-bs-target="#section4" type="button" role="tab" aria-controls="section4" aria-selected="false">
            Section4
            </a>
        </li>
      </ul>
    </nav>

    <form action="" class="col tab-content">
      <fieldset class="tab-pane fade show col ms-5 mt-4 active" id="section_overview" role="tabpanel">
        <legend>Overview</legend>
        <hr>

        <label for="">Some Value</label>
        <input type="text" class="form-control">
        <label for="">Some Value</label>
        <input type="text" class="form-control">
        <label for="">Some Value</label>
        <input type="text" class="form-control">
        <label for="">Some Value</label>
      </fieldset>

      <fieldset class="tab-pane fade col ms-5 mt-4" id="section2" role="tabpanel">
        <legend>Section 2</legend>
        <hr>

        <label for="">Some Value</label>
        <input type="text" class="form-control">
        <label for="">Some Value</label>
        <input type="text" class="form-control">
        <label for="">Some Value</label>
        <input type="text" class="form-control">
        <label for="">Some Value</label>
        <input type="text" class="form-control">
        <label for="">Some Value</label>
        <input type="text" class="form-control">
        <label for="">Some Value</label>
        <input type="text" class="form-control">
        <label for="">Some Value</label>
        <input type="text" class="form-control">
        <label for="">Some Value</label>
        <input type="text" class="form-control">
      </fieldset>

      <fieldset class="tab-pane fade col ms-5 mt-4" id="section3" role="tabpanel">
        <legend>Section 3</legend>
        <hr>

        <label for="">Some Value</label>
        <input type="text" class="form-control">
        <label for="">Some Value</label>
        <input type="text" class="form-control">
        <label for="">Some Value</label>
        <input type="text" class="form-control">
        <label for="">Some Value</label>
        <input type="text" class="form-control">
        <label for="">Some Value</label>
        <input type="text" class="form-control">
        <label for="">Some Value</label>
        <input type="text" class="form-control">
        <label for="">Some Value</label>
        <input type="text" class="form-control">
        <label for="">Some Value</label>
        <input type="text" class="form-control">
      </fieldset>

      <fieldset class="tab-pane fade col ms-5 mt-4" id="section4" role="tabpanel">
        <legend>Section 4</legend>
        <hr>

        <label for="">Some Value</label>
        <input type="text" class="form-control">
        <label for="">Some Value</label>
        <input type="text" class="form-control">
        <label for="">Some Value</label>
        <input type="text" class="form-control">
        <label for="">Some Value</label>
        <input type="text" class="form-control">
        <label for="">Some Value</label>
        <input type="text" class="form-control">
        <label for="">Some Value</label>
        <input type="text" class="form-control">
        <label for="">Some Value</label>
        <input type="text" class="form-control">
        <label for="">Some Value</label>
        <input type="text" class="form-control">

        <legend>Subsection 4</legend>
        <hr>

        <label for="">Some Value</label>
        <input type="text" class="form-control">
        <label for="">Some Value</label>
        <input type="text" class="form-control">
        <label for="">Some Value</label>
        <input type="text" class="form-control">
        <label for="">Some Value</label>
        <input type="text" class="form-control">
        <label for="">Some Value</label>
        <input type="text" class="form-control">
        <label for="">Some Value</label>
        <input type="text" class="form-control">
        <label for="">Some Value</label>
        <input type="text" class="form-control">
        <label for="">Some Value</label>
        <input type="text" class="form-control">

        <br>


        <label for="">Some Value</label>
        <input type="text" class="form-control">
        <label for="">Some Value</label>
        <input type="text" class="form-control">
        <label for="">Some Value</label>
        <input type="text" class="form-control">
        <label for="">Some Value</label>
        <input type="text" class="form-control">
        <label for="">Some Value</label>
        <input type="text" class="form-control">
        <label for="">Some Value</label>
        <input type="text" class="form-control">
        <label for="">Some Value</label>
        <input type="text" class="form-control">
        <label for="">Some Value</label>
        <input type="text" class="form-control">

        <br>
        <span class="fs-4">The End of Section 4</span>
      </fieldset>

    </form>
  </div>

</body>

Answered By - Jacob

This Answer collected from stackoverflow and tested by AngularFix community admins, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Saturday

Why are my divs not handling overflow properly when using overflow-y scroll?

Issue

Solution

0 comments:

Post a Comment

Popular Posts

Labels