模拟“卡片布局”使用flexx时

我遇到了一个相当复杂的问题。我想做一个布局在CSS具有多个层这意味着基本上有多个<div>元素堆叠在彼此的顶部(或至少使它看起来像这样)，只有顶部是可见的。

在许多其他GUI环境中，这被称为卡片布局。

所以计划是:

• 在一个父<div class='container'>元素中创建所有<div class='layer'>元素
• 让他们先有display: none
• 调用$.show()或$.hide()来显示或隐藏它们

HTML:

<div id="containerOne">
    <div  class="layer a"></div>
    <div class="layer b">
        <div  class="inner b1"></div>
    </div>
    <div  class="layer c"></div>
</div>

CSS:

#containerOne {
    width: 150px;
    height: 150px;
    background: red;
}
#containerOne .layer {
    display : none;   
    width: 100%;
    height: 100%
}
.a {    
    background: green;
}
.b {
    background: orange;
}
.b1 {
    width: 50%;
    height: 50%;
    background: yellow;
}
.c {
    background: blue;
}

这在一开始是有效的，因为元素一开始在页面上没有任何空间保留，只有在显示时才会占用空间。

现在，如果我有一个嵌套元素在一个图层，我想让它的大小为50% x 50%这也很好:即使图层div最初设置为display: none 。

现在默认情况下，我的容器div设置为display: block，所有的大小计算似乎工作得很好，这就是我的问题开始的地方:

我需要容器div具有display: flex，以利用现代浏览器的Flexbox功能。而不是为我的图层设置一个固定的宽度我现在配置他们有flex: 1，这样他们就可以增长到容器的全部尺寸。

这也像预期的那样工作。有一个例外:嵌套元素的大小应该是50% x 50%，但它根本没有大小。在JavaScript中调试显示，这是因为在创建层时，它们的大小都为0 x 0，并且在$.show()显示它们时首先获得分配的大小。

我所期望的是，一旦它们显示出来，嵌套元素将增长到其50% x 50%大小，但它没有。

有什么我能做的吗?(好的解决方案和逆向破解解决方案)。

我还制作了一个Fiddle来演示这个问题，并进行了测试。