CSS overflow-y:scroll not work with flex box

I have this layout

enter image description here

        .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>

Problem here is if I uncomment 7,8 items and add those to the yellow section, the expected behaviour is yellow section will contain all the items with a scroll bar.

Even though I have put overflow-y: scroll; to .items and a scrollbar kind of thing displays here.7th and 8th items will added to the layout by pushing pagination section to bottom without a scroll bar. How do I fix this problem using CSS?

Solution 1:

So I don't see the issue when main is set to 100vh. I think that would do with our different viewports and monitor sizes. So I set your main to 50vh so I could see the issue. Then you can set a static height on jobs in this example I set height: 694px; and then that container will only display so much (first 6 items) and the limited height will allow for an overflow-y: scroll; as desired.

.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>

CSS overflow-y:scroll not work with flex box

Solution 1:

Related

Recent Posts