title: Flexbox CSS results in zero-pixel-tall elements
body: <p>The following HTML file displays nothing, and every element is 0 pixels tall:</p>
  
  <pre><code>&lt;html&gt;
      &lt;body&gt;
          &lt;div style="display: flex; flex-direction: column"&gt;
              &lt;div style="flex: 1; display: flex"&gt;
                  &lt;pre&gt;Hello&lt;/pre&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I expect it to display a <code>pre</code>-formatted "Hello" on the page. </p>
  
  <p>If I remove any of the following, the <code>pre</code>-formatted "Hello" appears correctly, and the elements change from 0 pixels tall to 10s of pixels tall:</p>
  
  <ul>
  <li>Any of the <code>div</code>s surrounding the <code>pre</code></li>
  <li>Any of the inline styles applied to those divs (<code>display</code>, <code>flex-direction,</code> flex`)</li>
  </ul>
  
  <p>Converting the <code>pre</code> to a <code>div</code> makes the "Hello" appear, but the surrounding elements are all still the incorrect height, 0 pixels tall, rather than the expected tens-of-pixels tall.</p>
  
  <p>Does anyone know what could be causing this? </p>