Прокрутка флексбоксов в несколько рядов с переполнением контента - PullRequest
Новая
       35

Прокрутка флексбоксов в несколько рядов с переполнением контента

0 голосов
/ 21 октября 2019

У меня есть страница с вложенными макетами Flex (3 строки по 1–3 деления в каждой). Страница не должна становиться прокручиваемой, только поля в каждом разделе. Но дисплей div увеличивает высоту окна вместо того, чтобы становиться прокручиваемым. Я уже пытался адаптировать некоторые решения для однорядного гибкого макета, но не могу заставить его работать.

Codepen 

    body {
        margin: 0;
    }

    #main {
        height: 100vh;
        display: flex;
        flex-direction: column;
    }

    #content {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    #topRow {
        flex-grow: 47.5;
        display: flex;
    }

    #middleRow {
        flex-grow: 5;
        display: flex;
    }

    #bottomRow {
        flex-grow: 47.5;
        display: flex;
    }


    /*display container divs*/
    #content > div > div {
        flex: 1;
        display: flex;
        flex-direction: column;
        /*overflow: auto;*/
    }

    .display {
        flex-grow: 1;
        overflow: scroll;
        min-height: 0;
    }
...