title: Simulating a "Card Layout" when using Flexbox
body: <p>I'm having a rather complex problem here. I'd like to make a Layout in CSS featuring multiple <strong>Layers</strong> which means basically having multiple <code>&lt;div&gt;</code> elements stacked ontop of each other (or at least make it look like this) and only the top one is visible.</p>
  
  <p>In many other GUI Environements this is known as a <strong>Card Layout</strong>.</p>
  
  <p>So the plan was:</p>
  
  <ul>
  <li>Create all <code>&lt;div class='layer'&gt;</code> elements in one parent <code>&lt;div class='container'&gt;</code> element</li>
  <li>Make them have <code>display: none</code> initially</li>
  <li>invoke <code>$.show()</code> or <code>$.hide()</code> to show or hide them</li>
  </ul>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="containerOne"&gt;
      &lt;div  class="layer a"&gt;&lt;/div&gt;
      &lt;div class="layer b"&gt;
          &lt;div  class="inner b1"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div  class="layer c"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>This works at first since the elements will not have any space reserved on the page initially and will only occupy space when shown.</p>
  
  <p>Now if i have a nested element <em>inside</em> a Layer and i want it to have a size of <strong>50% x 50%</strong> this also works well: <em>Even if the layer div is set to <code>display: none</code> initially</em>.</p>
  
  <p>Now by default my Container div is set to <code>display: block</code> and all the size calculation seems to work fine and here's where my problem begins:</p>
  
  <p>I need the Container div to have <code>display: flex</code> to take advantage of the <em>Flexbox</em> features of modern browsers. Instead of setting a fixed width for my <em>Layers</em> i now configure them to have <code>flex: 1</code> so they grow to the full size of the container.</p>
  
  <p>This also works as expected. With one exception: The nested Element that should have a size of <strong>50% x 50%</strong> won't have a size at all. Debugging this in JavaScript shows that this is because at the moment the <em>Layers</em> are created they will all have a size of <strong>0 x 0</strong> and will first get their size assigned when they are shown by <code>$.show()</code>.</p>
  
  <p>What i would expect is that once they are shown, the nested element will grow to its <strong>50% x 50%</strong> size but it doesn't.</p>
  
  <ul>
  <li>Is there anything i can do about it? (good solutions and <em>back-hack-workaround</em> solutions).</li>
  </ul>
  
  <p>I also made a <a href="http://jsfiddle.net/CN7e8/1/" rel="nofollow">Fiddle</a> to demonstrate the problem and to play around with.</p>