html - 为嵌套的外部 flex 元素设置固定高度

Question

我将尝试在嵌套解决方案中为外部 flexbox 元素的高度设置一个固定值，但没有成功。

在 flex-container 和 flex-item 上尝试高度、固定高度、最大高度。

To demonstrate I have create a codepen: 

Codepen-Example

最佳所有卡片应为 400px 或 80% 或 evt。 windows.height - 100px。 (可选)。

我也在那个方向尝试了其他几个问题/答案，例如

• nested-flexbox-with-same-height-for-nested-items

• equal-height-children-of-flex-items

但我没有找到合适的解决方案。

我希望它只是一个简单的属性在正确的地方来解决它。

如果有什么不清楚的地方，或者需要更多的描述，让我知道我应该在哪个方向加强这个问题。

Answer 1

只需在您的 .flex-item 类上设置一个固定的高度。 然后处理丑陋的溢出滚动条(也许设计它们而不是仅仅 overflow hidden ，尽管这超出了这个特定修复的范围)。 我希望我没有误解你的意思。

.flex-item {
    ...
    height: 400px;
}

这是您的布局的改编版本 https://codepen.io/thejonsilver/pen/PQvZVv