title: Why is the second flexbox container (with a SVG in it) moving up?
body: <p>I'm struggling to <strong>understand the behaviour</strong> of the following pen (but I already have a workaround): <a href="https://codepen.io/nicoespeon/pen/BOamdJ" rel="nofollow noreferrer">https://codepen.io/nicoespeon/pen/BOamdJ</a></p>
  
  <p>There are 3 flexbox containers:</p>
  
  <ol>
  <li>the first contains only text</li>
  <li>the second contains a <code>&lt;svg&gt;</code> element and some text</li>
  <li>the third contains some text and a <code>&lt;svg&gt;</code> element</li>
  </ol>
  
  <p>I expect all of them to be aligned. But the second box is moving up.</p>
  
  <p><a href="https://i.stack.imgur.com/Q2NFt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Q2NFt.png" alt="enter image description here"></a></p>
  
  <p><strong>Note: I know that if I wrap all of them in a flex container (e.g. set <code>display: flex | inline-flex;</code> to <code>body</code>), they get aligned.</strong> But I don't understand how the <code>&lt;svg&gt;</code> element is impact its flex container in the second box.</p>
  
  <p>Any idea?</p>