Flex-box：3 列高度相同，页面滚动

Question

我是 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：所以现在内容会拉伸该列，但是，如果内容很小 none 列的 100% 屏幕高度。

我该如何解决？

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

谢谢！

Answer 1

将height:100%更改为.container的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%
}

Answer 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>

Flex-box：3 列高度相同，页面滚动

Flex-box: 3 columns of same height with page scroll

html

css

markup

flexbox