CSS overflow-y:scroll ne fonctionne pas avec la boîte flex.

Question

J'ai ce design

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

    Document

            Header

            Filtre

            Trier

                    1
                    2
                    3
                    4
                    5
                    6

                    Pagination

                contenu

Le problème ici est que si je décommente les éléments 7 et 8, et les ajoute à la section jaune, le comportement attendu est que la section jaune contiendra tous les éléments avec une barre de défilement.

Même si j'ai ajouté overflow-y: scroll; à .items et qu'une sorte de barre de défilement s'affiche ici, les 7ème et 8ème éléments seront ajoutés à la mise en page en poussant la section de pagination vers le bas sans barre de défilement. Comment puis-je résoudre ce problème en utilisant du CSS ?

Answer 1

Donc je ne vois pas le problème quand main est défini à 100vh. Je pense que cela a à voir avec nos différents viewports et tailles d'écran. Donc j'ai réglé votre main à 50vh pour que je puisse voir le problème. Ensuite, vous pouvez définir une hauteur fixe sur jobs dans cet exemple j'ai défini height: 694px; et ensuite ce conteneur affichera seulement autant (premiers 6 éléments) et la hauteur limitée permettra un overflow-y: scroll; comme souhaité.

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

    Document

            Header

            Filtre

            Trier

                    1
                    2
                    3
                    4
                    5
                    6
                    7
                    8
                    9
                    10
                    11
                    12
                    13
                    14
                    15
                    16

                    Pagination

                content