-1

I have a scrollbar for a bootstrap list group. I have the page take up 100% of the view with flexbox, since it will be a single page website. The scrollbar is extending past the view, and the page is using the html / body scrollbar instead.

I have tried these questions, but their answers did not work.

Page extends past edge of screen

How can I combine flexbox and vertical scroll in a full-height app?

html,
body {
  height: 100%;
  overflow: hidden;
}

.min-100 {
  min-height: 100%;
}

.sideBar {
  overflow-x: hidden;
  overflow-y: scroll;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css">
  <style>
    html,
    body {
      height: 100%;
      overflow: hidden;
    }
    
    .min-100 {
      min-height: 100%;
    }
    
    .sideBar {
      overflow-x: hidden;
      overflow-y: scroll;
    }
  </style>
</head>

<body>
  <div class="container-fluid min-100 d-flex flex-column">
    <div class="row flex-grow-1 d-none d-md-flex">
      <div class="col px-0 list-group list-group-flush h-100 sideBar">
        <a class="list-group-item text-dark p-3" style="background-color: rgba(0,0,0,.03);">
          <div class="d-inline-block float-start position-relative me-3">
            <img class="" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
            <span class="badge border border-light rounded-circle bg-success p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
          </div>
          <div>
            You<br>
            <small class="fw-light text-muted text-truncate d-block">This is a status</small>
          </div>
        </a>

        <a class="list-group-item text-dark p-3">
          <div class="d-inline-block float-start position-relative me-3">
            <img class="" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
            <span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
          </div>
          <div>
            User<br>
            <small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
          </div>
        </a>

        <a class="list-group-item text-dark p-3">
          <div class="d-inline-block float-start position-relative me-3">
            <img class="" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
            <span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
          </div>
          <div>
            User<br>
            <small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
          </div>
        </a>

        <a class="list-group-item text-dark p-3">
          <div class="d-inline-block float-start position-relative me-3">
            <img class="" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
            <span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
          </div>
          <div>
            User<br>
            <small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
          </div>
        </a>

        <a class="list-group-item text-dark p-3">
          <div class="d-inline-block float-start position-relative me-3">
            <img class="" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
            <span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
          </div>
          <div>
            User<br>
            <small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
          </div>
        </a>

        <a class="list-group-item text-dark p-3">
          <div class="d-inline-block float-start position-relative me-3">
            <img class="" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
            <span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
          </div>
          <div>
            User<br>
            <small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
          </div>
        </a>

        <a class="list-group-item text-dark p-3">
          <div class="d-inline-block float-start position-relative me-3">
            <img class="" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
            <span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
          </div>
          <div>
            User<br>
            <small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
          </div>
        </a>

        <a class="list-group-item text-dark p-3">
          <div class="d-inline-block float-start position-relative me-3">
            <img class="" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
            <span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
          </div>
          <div>
            User<br>
            <small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
          </div>
        </a>

        <a class="list-group-item text-dark p-3">
          <div class="d-inline-block float-start position-relative me-3">
            <img class="" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
            <span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
          </div>
          <div>
            User<br>
            <small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
          </div>
        </a>

        <a class="list-group-item text-dark p-3">
          <div class="d-inline-block float-start position-relative me-3">
            <img class="" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
            <span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
          </div>
          <div>
            User<br>
            <small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
          </div>
        </a>

        <a class="list-group-item text-dark p-3">
          <div class="d-inline-block float-start position-relative me-3">
            <img class="" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
            <span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
          </div>
          <div>
            User<br>
            <small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
          </div>
        </a>
      </div>
      <div class="col-8 px-0 bg-warning">
        3
      </div>
      <div class="col px-0 bg-danger">
        4
      </div>
    </div>
  </div>

</body>

</html>

Note: the page is hidden on small devices, so you may need to extend the layout.

TaromaruYuki
  • 65
  • 5

1 Answers1

1

You don't need all of the flex classes you have. Set the height of the container and the row to h-100 (100%) and the rest should work:

html,
body {
    height: 100%;
    overflow: hidden;
}

.sideBar {
    overflow-x: hidden;
    overflow-y: auto;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid h-100">
    <div class="row h-100 d-none d-md-flex">
        <div class="col px-0 list-group list-group-flush h-100 sideBar">
            <a class="list-group-item text-dark p-3" style="background-color: rgba(0,0,0,.03);">
                <div class="d-inline-block float-start position-relative me-3">
                    <img class="" alt="User" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
                    <span class="badge border border-light rounded-circle bg-success p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
                </div>
                <div>
                    You<br>
                    <small class="fw-light text-muted text-truncate d-block">This is a status</small>
                </div>
            </a>

            <a class="list-group-item text-dark p-3">
                <div class="d-inline-block float-start position-relative me-3">
                    <img class="" alt="User" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
                    <span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
                </div>
                <div>
                    User<br>
                    <small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
                </div>
            </a>

            <a class="list-group-item text-dark p-3">
                <div class="d-inline-block float-start position-relative me-3">
                    <img class="" alt="User" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
                    <span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
                </div>
                <div>
                    User<br>
                    <small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
                </div>
            </a>

            <a class="list-group-item text-dark p-3">
                <div class="d-inline-block float-start position-relative me-3">
                    <img class="" alt="User" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
                    <span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
                </div>
                <div>
                    User<br>
                    <small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
                </div>
            </a>

            <a class="list-group-item text-dark p-3">
                <div class="d-inline-block float-start position-relative me-3">
                    <img class="" alt="User" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
                    <span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
                </div>
                <div>
                    User<br>
                    <small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
                </div>
            </a>

            <a class="list-group-item text-dark p-3">
                <div class="d-inline-block float-start position-relative me-3">
                    <img class="" alt="User" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
                    <span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
                </div>
                <div>
                    User<br>
                    <small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
                </div>
            </a>

            <a class="list-group-item text-dark p-3">
                <div class="d-inline-block float-start position-relative me-3">
                    <img class="" alt="User" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
                    <span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
                </div>
                <div>
                    User<br>
                    <small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
                </div>
            </a>

            <a class="list-group-item text-dark p-3">
                <div class="d-inline-block float-start position-relative me-3">
                    <img class="" alt="User" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
                    <span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
                </div>
                <div>
                    User<br>
                    <small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
                </div>
            </a>

            <a class="list-group-item text-dark p-3">
                <div class="d-inline-block float-start position-relative me-3">
                    <img class="" alt="User" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
                    <span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
                </div>
                <div>
                    User<br>
                    <small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
                </div>
            </a>

            <a class="list-group-item text-dark p-3">
                <div class="d-inline-block float-start position-relative me-3">
                    <img class="" alt="User" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
                    <span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
                </div>
                <div>
                    User<br>
                    <small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
                </div>
            </a>

            <a class="list-group-item text-dark p-3">
                <div class="d-inline-block float-start position-relative me-3">
                    <img class="" alt="User" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
                    <span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
                </div>
                <div>
                    User<br>
                    <small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
                </div>
            </a>
        </div>
        <div class="col-8 px-0 bg-warning">
            3
        </div>
        <div class="col px-0 bg-danger">
            4
        </div>
    </div>
</div>
Rich DeBourke
  • 2,873
  • 2
  • 15
  • 17