Flexbox未达到全高

Question

在我的webapp布局中，我无法获取主要内容的容器（#loading）以获取屏幕的剩余高度。使用flexbox，我设法让<main>增长，但不是它包含的任何内容。

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

Answer 1

this你想要的效果是什么？

我只是将padding-bottom和padding-top 50%分别添加到.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会响应调整大小以占用可用的任何大小。

Answer 2

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