title: SVG object inside Flexbox
body: <p>I tried to put a SVG object inside a flexbox and it ended messing up the whole thing:</p>
  
  <p><a href="https://jsfiddle.net/h8n1wxcn/" rel="nofollow">https://jsfiddle.net/h8n1wxcn/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
      margin: 0;
      padding: 0;
  }
     
  .parent {
      display: flex;
      flex-direction: row;
      background-color: red;
      width: 100%;
      height: 200px;
      justify-content: space-between;
  }
     
  .child {
      flex-grow: 0;
      background-color: yellow;
      border: 1px dashed blue;
  }
     
  .svg {
      background-color: yellow;
      border: 1px dashed blue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="parent"&gt;
      &lt;div class="child"&gt;
          &lt;p&gt;Hello&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="svg"&gt;
          &lt;object id="loader" type="image/svg+xml" data="https://la-cascade.io/content/images/2015/06/kiwi.svg" width="150px"&gt;
      &lt;/div&gt;
      &lt;div class="child"&gt;
          &lt;p&gt;Yo&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'd like the .svg div to be centered, when I replace the object tag by some random text, it works perfectly, but suddenly when I put the object tag instead, it ends up removing or hiding the last div of my flexbox</p>