Element overflowing even with overflow-y: scroll

Question

I have this list of songs, i'm using bootstrap and react, i'm trying to make the entirety of the elements fit inside the body, so that the "default" browser scroll bar does not appear, instead, i want my list-group to have the scroll bar, here is what i have right now:

<div id="root">
    <div class="App">
        <div class="jumbotron">
            <h1>Songs</h1>
            <div class="mb-3 input-group">
                <input placeholder="Search" aria-label="Search" class="form-control" />
                <div class="input-group-append">
                    <span class="input-group-text"><i class="fas fa-search" aria-hidden="true"></i></span>
                </div>
            </div>
            <div class="list-group">
                <div class="list-group-item">Song 1</div>
                <div class="list-group-item">Song 2</div>
                <div class="list-group-item">Song 3</div>
                <div class="list-group-item">Song 4</div>
                <div class="list-group-item">Song 5</div>
                <div class="list-group-item">Song 6</div>
                <div class="list-group-item">Song 7</div>
                <div class="list-group-item">Song 8</div>
                <div class="list-group-item">Song 9</div>
                <div class="list-group-item">Song 10</div>
                <div class="list-group-item">Song 11</div>
                <div class="list-group-item">Song 12</div>
                <div class="list-group-item">Song 13</div>
                <div class="list-group-item">Song 14</div>
                <div class="list-group-item">Song 15</div>
                <div class="list-group-item">Song 16</div>
                <div class="list-group-item">Song 17</div>
                <div class="list-group-item">Song 18</div>
                <div class="list-group-item">Song 19</div>
                <div class="list-group-item">Song 20</div>
            </div>
        </div>
    </div>
</div>

html,
body {
  height: 100%;
}

#root{
  max-height: 100%;
}

.App {
  max-height: 100%;
  margin-top: 0px;
  text-align: center;
}

.jumbotron {
  max-height: 100%;
  margin: auto;
  max-width: 800px;
}

.list-group {
  overflow-y: scroll;
}

as you can see, i have put a max-height of 100% on basically everything in a desperate attempt to make it work, but i have also tried without them

you can see it better in this codepen: https://codepen.io/levyks/pen/zYZBjZw

and even better in the fullscreen version of it: https://codepen.io/levyks/full/zYZBjZw

EDIT: This is a gif on how i want it to behave, i was able to achieve it by adding this to the list-group css:

height: calc(100vh - 238px);

but this is definitely not a good way to do it, is it?

Answer 1

You need to set height of list-group element.

Working example ( codepen ):

.list-group {
  overflow-y: scroll;
  height: 50vh;
}

Alternatively, you can use calc() :

.list-group {
  overflow-y: scroll;
  height: calc(0.50 * 100vh); //0.50 is percent of screen height
}