title: display:flex in a child element breaks the display:inline of the parent
body: <p>Say I've got three inline elements that contain spans, something of the type of</p>
  
  <pre><code>&lt;div class="my-inline-element"&gt;
      &lt;span &gt;Item1&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div class="my-inline-element"&gt;
      &lt;span &gt;Item2&lt;/span&gt;
  &lt;/div&gt;  
  
  &lt;div class="my-inline-element"&gt;
      &lt;span &gt;Item3&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><code>.my-inline-element</code> style has <code>display:inline;</code>:</p>
  
  <pre><code>.my-inline-element{
    border:2px solid red;
    display:inline;
    margin-right:5px;
  }
  </code></pre>
  
  <p>Everything works fine (<a href="https://jsfiddle.net/dbbd0zLa/1/" rel="nofollow noreferrer">https://jsfiddle.net/dbbd0zLa/1/</a>)</p>
  
  <p><a href="https://i.stack.imgur.com/ykrqY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ykrqY.png" alt="expected styling"></a></p>
  
  <p>The problem happens when I want to make the span inside <code>display:flex;</code>...</p>
  
  <pre><code>.my-inline-element span {
    display: flex;
  }
  </code></pre>
  
  <p>Why does it break the parent (<code>my-inline-element</code>) inline display?
  (<a href="https://jsfiddle.net/9qdphh61/1/" rel="nofollow noreferrer">https://jsfiddle.net/9qdphh61/1/</a>)</p>
  
  <p><a href="https://i.stack.imgur.com/eRSic.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eRSic.png" alt="broken inline style"></a></p>