Flexbox 没有占据全部高度答案

【问题标题】：Flexbox not taking the full heightFlexbox 没有占据全部高度
【发布时间】：2015-08-03 23:17:57
【问题描述】：

在我的 web 应用布局中，我无法让主要内容的容器 (#loading) 占据屏幕的剩余高度。使用 flexboxes，我设法让 <main> 增长，但它没有包含任何内容。

JSFiddle 示例：http://jsfiddle.net/1r65v2uj/1/

【问题讨论】：

【解决方案1】：

this 是您想要的效果吗？

我只是将50% 中的padding-bottom 和padding-top 添加到您的.card-panel。

#loading > .row > .card-panel {
    position: relative;
    flex: 1 0 auto;
    -webkit-flex: 1 0 auto;
    padding-top: 50%;
    padding-bottom: 50%;
}

编辑：您现在需要约束 main 这样的父元素，因为 .card-panel 会响应地调整大小以占用它可用的任何大小。

【讨论】：

不完全，不。我不是要让加载圈居中，而是要让卡片面板占据屏幕的其余部分。

【解决方案2】：

我将height: 100vh 添加到.card-panel。请参阅updated jsfiddle。

【讨论】：

这会导致卡片面板变得比屏幕长。我希望它占据屏幕剩余的任何部分，而不是导致溢出。