CSS溢出-y：滚动不适用于弹性框答案

【问题标题】：CSS overflow-y:scroll not work with flex boxCSS溢出-y：滚动不适用于弹性框
【发布时间】：2022-01-11 23:28:47
【问题描述】：

我有这个布局

        .main {
    background-color: greenyellow;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.header{
    background-color: hotpink;
}
.filter{
    background-color: indianred;
}
.sort{
    background-color: lavender;
    /* height: 30rem; */
}

.jobs{
    background-color: blue;
    display: flex;
    flex: 1;
   
}

.joblist{
    background-color: cornflowerblue;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

   
    
}



body,html {
    margin: 0;
    padding: 0;
}

.pagination{
   background-color:chartreuse
}

.items {
    
    background-color:yellow;
    display: flex;
 
    flex:1;
    flex-direction: column;
    overflow-y: scroll;
}

.item {
    height: 100px;
    border:1px solid black
}

<!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">
    <!-- <link rel="stylesheet" href="style.css"> -->
    <style>

    </style>
    <title>Document</title>
</head>
<body>
    <div class="main">
        <div class="header">
            <span>Header</span>
        </div>
        <div class="filter">
            <h1>Filter</h1>
        </div>
        <div class="sort">
            <h1>Sort</h1>
        </div>
        <div class="jobs">
            <div class="joblist">
                <div class="items">
                    <div class="item">1</div>
                    <div class="item">2</div>
                    <div class="item">3</div>
                    <div class="item">4</div>
                    <div class="item">5</div>
                    <div class="item">6</div>
                    <!-- <div class="item">7</div>
                    <div class="item">8</div> -->


                </div>
                <div class="pagination">
                    <h1>Pagination</h1>
                </div>

            </div>
            <div class="jobview">
                content
            </div>

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

这里的问题是，如果我取消注释 7,8 个项目并将它们添加到黄色部分，预期的行为是黄色部分将包含所有带有滚动条的项目。

即使我已将 overflow-y: scroll; 放入.items 并在此处显示滚动条之类的东西。通过将分页部分推到底部而不使用滚动条，第 7 和第 8 项将添加到布局中。如何使用 CSS 解决此问题？

【问题讨论】：

标签： html css flexbox

【解决方案1】：

所以当main 设置为100vh 时，我看不到问题。我认为这与我们不同的视口和显示器尺寸有关。所以我将你的main 设置为50vh，这样我就可以看到这个问题了。然后您可以在jobs 上设置静态高度，在此示例中我设置了height: 694px;，然后该容器将仅显示这么多（前6 个项目），并且有限的高度将允许overflow-y: scroll; 根据需要。

.main {
    background-color: greenyellow;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.header{
    background-color: hotpink;
}
.filter{
    background-color: indianred;
}
.sort{
    background-color: lavender;
    /* height: 30rem; */
}

.jobs{
    background-color: blue;
    display: flex;
    flex: 1;
    height: 694px;
   
}

.joblist{
    background-color: cornflowerblue;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

   
    
}



body,html {
    margin: 0;
    padding: 0;
}

.pagination{
   background-color:chartreuse
}

.items {
    
    background-color:yellow;
    display: flex;
 
    flex:1;
    flex-direction: column;
    overflow-y: scroll;
}

.item {
    min-height: 100px;
    height: 100px;
    border:1px solid black
}

<!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">
    <!-- <link rel="stylesheet" href="style.css"> -->
    <style>

    </style>
    <title>Document</title>
</head>
<body>
    <div class="main">
        <div class="header">
            <span>Header</span>
        </div>
        <div class="filter">
            <h1>Filter</h1>
        </div>
        <div class="sort">
            <h1>Sort</h1>
        </div>
        <div class="jobs">
            <div class="joblist">
                <div class="items">
                    <div class="item">1</div>
                    <div class="item">2</div>
                    <div class="item">3</div>
                    <div class="item">4</div>
                    <div class="item">5</div>
                    <div class="item">6</div>
                    <div class="item">7</div>
                    <div class="item">8</div>
                    <div class="item">9</div>
                    <div class="item">10</div>
                    <div class="item">11</div>
                    <div class="item">12</div>
                    <div class="item">13</div>
                    <div class="item">14</div>
                    <div class="item">15</div>
                    <div class="item">16</div>


                </div>
                <div class="pagination">
                    <h1>Pagination</h1>
                </div>

            </div>
            <div class="jobview">
                content
            </div>

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

【讨论】：

我希望项目一直延伸到视口的底部，并且 .items 类中的项目在溢出时应该是可滚动的。
@PathumKalhan 我添加了更多项目并将视口更改回100vh 以演示行为。查看更改。
@PathumKalhan 为你做的？
这行得通！非常感谢。
@PathumKalhan 我能问一下为什么这不再适合你了吗？