Flex-box：3列具有相同高度的页面滚动[重复]答案

【问题标题】：Flex-box: 3 columns of same height with page scroll [duplicate]Flex-box：3列具有相同高度的页面滚动[重复]
【发布时间】：2017-11-20 16:14:18
【问题描述】：

我是 Flexbox 的新手，我正在研究 3 列布局。

这就是我的目标：

3 列
每个 100% 高度
每个内容高度可变
如果内容高于用户的屏幕，页面应该滚动
列应保持相同高度

这是我的 HTML 代码：

<html>
    <head>
        <title>
            FlexBox
        </title>
        <link rel="stylesheet" href="./styles.css">
    </head>
    <body>
        <div class="container">
            <div class="cols">
                1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
                1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
                1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
                1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
                1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
                1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
            </div>
            <div class="cols">
                text
            </div>
            <div class="cols">
                text
            </div>
        </div>
    </body>
</html>

和 CSS：

body, html {
    background-color: seashell;
    margin: 0;
}

.container {
    display: flex;
    justify-content: center;
    height: 100%;
}

.container .cols {
    flex: 1 0 auto;
    background-color: burlywood;
    margin: 10px 10px 0 10px;
    padding: 10px;
}

在这种情况下发生的情况是内容溢出列（获得 100% 的屏幕高度）：

我试图解决的问题：

从.container 中删除height: 100%：当内容高并拉伸列时，它会导致正确的外观，但如果内容小 - 列将不会是 100% 屏幕高度。所以它对我不起作用。
将align-items: flex-start 添加到.container：所以现在内容会拉伸列，但同样，如果内容很小，所有列都不会达到 100% 的屏幕高度。

我该如何解决？

PS：奇怪的是，当我尝试 this example in jsfiddle 时，它按预期工作，但是当我在浏览器中运行它时 - 我得到了上面描述的内容。

谢谢！

【问题讨论】：

使用min-height: 100vh，即使内容较少，项目也会填满视口...jsfiddle.net/3h6tgncj

标签： html css flexbox markup

【解决方案1】：

将.container的height:100%更改为min-height:100%，同时将height:100%添加为body, html

.container {
    display: flex;
    justify-content: center;
    min-height: 100%;
}

body, html {
    background-color: seashell;
    margin: 0;
    height: 100%
}

【讨论】：

【解决方案2】：

在容器上添加最大高度。并在列上溢出滚动

body, html {
    background-color: seashell;
    margin: 0;
}

.container {
    display: flex;
    justify-content: center;
    height: 100%;
    max-height: 100vh;
}

.container .cols {
    flex: 1 0 auto;
    background-color: burlywood;
    margin: 10px 10px 0 10px;
    padding: 10px;
    
    overflow: scroll;
}

<div class="container">
  <div class="cols">
    1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
    1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
    1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
    1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
    1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
    1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
  </div>
  <div class="cols">
    text
  </div>
  <div class="cols">
    text
  </div>
</div>

【讨论】：

是的，我需要滚动显示整个页面，而不是单个列...但感谢您的关注。