html - 根据容器高度调整元素大小纯 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 会拉伸(stretch)图像，而 Chrome 根本不会调整大小。我认为我给出的 flex 规范 (flex-grow: 1) 会调整元素的大小，以便它们都垂直放置在容器中。

Firefox(正确)

Chrome(不正确)

Safari(不正确)

JSFiddle

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

Answer 1

看起来您正在混合使用不能很好地协同工作的两个规则。

你已经给了容器 justify-content: space-between。

但是你也给了每个 flex 元素 flex-grow: 1。

如果每个元素都设置为占用所有可用空间，justify-content: space-between 什么都不做(没有空间可以分配)。

二选一。