即使使用溢出-y，元素也會溢出：滾動

Question

我有這個歌曲列表，我正在使用引導程序並做出反應，我試圖讓整個元素都適合身體，所以“默認”瀏覽器滾動條不會出現，相反，我想要我的列表-group 有滾動條，這是我現在擁有的：

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

正如你所看到的，我在基本上所有的東西上都設置了 100% 的最大高度，以拼命嘗試讓它工作，但我也嘗試過沒有它們

你可以在這個 codepen 中更好地看到它： https://codepen.io/levyks/pen/zYZBjZw

在它的全屏版本中甚至更好： https://codepen.io/levyks/full/zYZBjZw

編輯：這是一個關於我希望它如何表現的 gif，我可以通過將它添加到列表組 css 來實現它：

height: calc(100vh - 238px);

但這絕對不是一個好方法，是嗎？

Answer 1

您需要設置list-group元素的高度。

工作示例（ codepen ）：

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

或者，您可以使用calc() ：

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