根据容器高度纯CSS调整元素大小

Question

我试图将页面的第一部分设置为用户窗口的100％，同时根据屏幕的高度调整3个垂直项目。

为了达到这个目的，我使用的是flexbox，特别是这些样式：

CSS

.vertical-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.theitems {
    flex-grow: 1;
}

这确实有效，但由于某些奇怪的原因，它只会在Firefox中正确调整元素大小。 Safari会拉伸图像，Chrome根本不会调整大小。我认为我给出的flex规范（flex-grow: 1）会调整项目的大小，使它们全部垂直放入容器内。

Firefox（正确）

Chrome（不正确）

Safari（不正确）

JSFiddle

有人知道这里发生了什么吗？

Answer 1

看起来你混合了两个不能很好地协同工作的规则。

您已经获得了容器justify-content: space-between。

但是你也给了每个弹性项目flex-grow: 1。

如果每个项目都设置为占用所有可用空间，justify-content: space-between什么也不做（没有空间可以分发）。

选择其中一个。

Answer 2

为什么不使用vh？

height: 100vh //This is 100% of the viewport

然后你可以在33.33vh

中给出元素