Html 弹性框：3列具有相同高度的页面滚动

我是Flexbox的新手，我正在制作一个3列布局

这就是我的目标：

• 3列
• 每100%高度
• 每个区域中的可变内容高度
• 如果内容高于用户屏幕，则页面应滚动
• 立柱应保持相同高度

这是我的HTML代码：

柔性箱
1
1
1
1
1
1
1
1
1
1
1
1

1
1
1
1
1
1
1
1
1
1
1
1

1
1
1
1
1
1
1
1
1
1
1
1

1
1
1
1
1
1
1
1
1
1
1
1

1
1
1
1
1
1
1
1
1
1
1
1

1
1
1
1
1
1
1
1
1
1
1
1

文本
文本

和CSS：

body，html{
背景颜色：贝壳；
保证金：0；
}
.集装箱{
显示器：flex；
证明内容：中心；
身高：100%；
}
.集装箱{
弹性：10自动；
背景颜色：白肋木；
利润率：10px 10px 0 10px；
填充：10px；
}

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

我试图解决的问题是：

从

.container

中删除

高度：100%

：当内容很高并拉伸列时，它会产生正确的外观，但如果内容很小，列将不会是100%屏幕高度。所以它对我不起作用

添加

align items:flex start

到

.container

：因此现在内容会拉伸列，但是，如果内容很小，则所有列都不会达到100%屏幕高度

我怎样才能修好它

PS：奇怪的是，当我尝试它时，它按预期工作，但当我在浏览器中运行它时，我得到了上面所描述的

---

谢谢

将

高度：100%

更改为

容器的
最小高度：100%
，同时将
高度：100%
添加到
主体，html

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

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

将
容器的
高度：100%
更改为
最小高度：100%
，同时将
高度：100%
添加到
主体，html

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

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

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


body，html{
背景颜色：贝壳；
保证金：0；
}
.集装箱{
显示器：flex；
证明内容：中心；
身高：100%；
最大高度：100vh；
}
.集装箱{
弹性：10自动；
背景颜色：白肋木；
利润率：10px 10px 0 10px；
填充：10px；
溢出：滚动；
}

1
1
1
1
1
1
1
1
1
1
1
1

1
1
1
1
1
1
1
1
1
1
1
1

1
1
1
1
1
1
1
1
1
1
1
1

1
1
1
1
1
1
1
1
1
1
1
1

1
1
1
1
1
1
1
1
1
1
1
1

1
1
1
1
1
1
1
1
1
1
1
1

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


body，html{
背景颜色：贝壳；
保证金：0；
}
.集装箱{
显示器：flex；
证明内容：中心；
身高：100%；
最大高度：100vh；
}
.集装箱{
弹性：10自动；
背景颜色：白肋木；
利润率：10px 10px 0 10px；
填充：10px；
溢出：滚动；
}

1
1
1
1
1
1
1
1
1
1
1
1

1
1
1
1
1
1
1
1
1
1
1
1

1
1
1
1
1
1
1
1
1
1
1
1

1
1
1
1
1
1
1
1
1
1
1
1

1
1
1
1
1
1
1
1
1
1
1
1

1
1
1
1
1
1
1
1
1
1
1
1

文本
文本
使用
最小高度：100vh
项目将填充视口，即使内容更少。。。使用
最小高度：100vh
，即使内容较少，项目也会填充视口。。。是的，我需要滚动显示整个页面，而不是单个列。。。但谢谢你的关注。是的，我需要滚动显示整个页面，而不是单个列。。。但是谢谢你的关注。