title: How can I make flex-items block elements?
body: <p>The Flex-box spec <a href="http://dev.w3.org/csswg/css-flexbox/" rel="nofollow noreferrer">3</a> states that flex-items are not block containers:</p>
  
  <blockquote>
    <p>A flex item establishes a new formatting context for its contents. The
    type of this formatting context is determined by its ‘display’ value,
    as usual. The computed ‘display’ of a flex item is determined by
    applying the table in CSS 2.1 Chapter 9.7. However, flex items are
    flex-level boxes, not block-level boxes: they participate in their
    container's flex formatting context, not in a block formatting
    context.</p>
  </blockquote>
  
  <p>Look at this small example (fiddle: <a href="http://jsfiddle.net/dfrWd/2/" rel="nofollow noreferrer">4</a>):</p>
  
  <pre><code>#flex {
      height: 200px;
      width: 100px;
      display: flex;
      flex-flow: column;
      background-color: red;
  }
  #flexAuto {
      display: block;
      position: relative;
      flex: auto;
      width: 100%;
  }
  #oneHundredPercent {
      height: 100%;
      width: 100%;
      background-color: green;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="flex"&gt;
      &lt;div id="flexAuto"&gt;
          &lt;div id="oneHundredPercent"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I would expect #oneHundredPercent to be 200px high, like the size of its container #flexAuto. But it's 0px high. The actual output looks like the left picture. I would expect the right picture:</p>
  
  <p><img src="https://i.stack.imgur.com/nwPLm.png" alt="actual"><img src="https://i.stack.imgur.com/s3sJi.png" alt="expected"></p>
  
  <p>Is there a simple way to make the flex-item behave like a box again?</p>