如何在 display:flex 元素中设置 div 溢出属性

Question

所以我有这个日历应用程序，我正在使用 flexbox 属性创建...问题是我没有太多使用该属性的经验并且事情没有按预期工作。

所以在这个例子中，我有一个页眉，一个带有flex: 1 的 div 和一个页脚。

* {
    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 的高度。

Answer 1

你需要给 body 添加高度和溢出，然后也溢出到中间容器。

为 body 设置最小高度或在小屏幕上删除它可能是明智的。

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>