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

Question

所以我有这个日历应用程序，我正在使用 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 跨越除页眉和页脚之外的所有 space 页面，正如 flex: 1 属性.[=18 所期望的那样=]

但是...

我还希望 children divs 有 overflow-y: auto 并且不要将高度推到边界之外。所以 divs 的高度应该等于 parent div divided by divs 的数量，而我不必将值硬编码到child 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>

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

How to set div overflow property inside a display:flex element

css

overflow

flexbox

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

How to set div overflow property inside a display:flex element

css

overflow

flexbox

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