Как установить свойство переполнения div внутри дисплея: элемент flex - PullRequest
Новая
       12

Как установить свойство переполнения div внутри дисплея: элемент flex

0 голосов
/ 06 мая 2019

Итак, у меня есть приложение календаря, которое я создаю с использованием свойства flexbox ... проблема в том, что у меня нет большого опыта работы с этим свойством, и все работает не так, как ожидалось.

В этом примере у меня есть заголовок, div с flex: 1 и нижний колонтитул. 

* {
    margin: 0;
    padding: 0;
}
body {
    display: flex;
    flex-direction: column;
}
.container {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.container > div {
    overflow: scroll;
    height: 120px;
    padding: 10px;
}
header, footer {
    background: darkslateblue;
    color: white;
    padding: 20px;
}
    <header>lol</header>

    <div class="container">
        <div>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br></div>            
        <div>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br></div>            
        <div>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br></div>            
        <div>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br></div>            
        <div>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br></div>            
        <div>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br></div>            
        <div>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br></div>            
        <div>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br></div>            
    </div>

    <footer>foo bar</footer>

Я хочу, чтобы средний div занимал все пространство страницы, кроме верхнего и нижнего колонтитула, как и ожидалось от свойства flex: 1.

НО ...

Я также хочу, чтобы у дочерних элементов div было overflow-y: auto, чтобы они не выдвигали высоту за пределы границ.Таким образом, div должен иметь высоту, эквивалентную родительскому div, деленному на количество div, без необходимости жестко кодировать значение для высоты дочерних div.

1 Ответ

1 голос
/ 06 мая 2019

Вам нужно добавить высоту и переполнение к телу, а затем переполнить и средний контейнер.

Может быть целесообразно установить минимальную высоту тела или убрать ее на маленьких экранах.

flex может быть инбрикадным. 

* {
    margin: 0;
    padding: 0;
}
body {
    display: flex;
    flex-direction: column;
    height:100vh;
    min-height:35em; /* or whatever value seem fine to you*/
}
.container {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow:auto;
}
.container > div {
    overflow: scroll;
    /*height: 120px;*/
    flex:1;
    padding: 10px;
}
header, footer {
    background: darkslateblue;
    color: white;
    padding: 20px;
}
<header>lol</header>

    <div class="container">
        <div>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br></div>            
        <div>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br></div>            
        <div>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br></div>            
        <div>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br></div>            
        <div>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br></div>            
        <div>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br></div>            
        <div>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br></div>            
        <div>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br>dummy text<br></div>            
    </div>

    <footer>foo bar</footer>
...