title: Flexbox puts empty line inside <li> in Chrome
body: <p>I have following HTML:</p>
  
  <pre><code>&lt;ol&gt;
      &lt;li&gt;
          &lt;div style="display: flex;"&gt;
              &lt;div&gt;Giraffe&lt;/div&gt;
              &lt;div&gt;Lion&lt;/div&gt;
              &lt;div&gt;Koala Bear&lt;/div&gt;
          &lt;/div&gt;
      &lt;/li&gt;
  &lt;/ol&gt;
  </code></pre>
  
  <p>For some reason, Google Chrome puts empty line above the animals, like this:</p>
  
  <pre><code>1.
     GiraffeLionKoala Bear
  </code></pre>
  
  <p>Why is that and how to prevent it? It behaves like this even if I set the width manually.</p>
  
  <p>Tested on Chrome, FF and Safari. Only Google Chrome is the problem.</p>