为嵌套的外部flex项设置固定高度

Posted 2021-04-21

我将尝试在嵌套解决方案中将固定值设置为外部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

但在其中没有一个我找到了合适的解决方案。

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

如果某些事情不清楚，或需要更多描述，请告诉我应该在哪个方向提出问题。

答案

只需在.flex-item类上设置固定高度即可。然后处理丑陋的溢出滚动条（可能是它们的样式而不是隐藏溢出，尽管这超出了这个特定修复的范围）。我希望我没有误解你所追求的是什么。

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

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