title: SVG in flexbox messes up height of other elements
body: <p>I'm trying to use a svg element that resizes with the container size in a flexbox, but for some reason it messes up the size of a div (with text) below the svg. (How much changes when you resize the browser window)</p>
  
  <p><img src="https://i.imgur.com/DXwcQYV.png" alt="example"></p>
  
  <p>Here are the basic css properties I'm using for all this:</p>
  
  <pre><code>[layout] {
      box-sizing: border-box;
      display: flex;
  }
  
  [layout=column] {
      flex-direction: column;
  }
  
  [layout=row] {
      flex-direction: row;
  }
  
  [flex] {
      box-sizing: border-box;
      flex: 1;
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="content" style="height: 100%;" layout="row"&gt;
  
      &lt;div class="card" layout="column" flex&gt;
          &lt;div class="toolbar" layout="column"&gt;
              &lt;span&gt;Test&lt;/span&gt;
          &lt;/div&gt;
  
          &lt;div class="card-content" layout="column" flex&gt;
              &lt;div layout="column" flex&gt;
                  &lt;div layout="column" flex&gt;
                      &lt;div layout="column" flex
                           style="background:green;"&gt;
                          &lt;svg viewBox="0 0 50 50"&gt;
                              &lt;circle r="25" cx="25" cy="25"&gt;
                          &lt;/svg&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div&gt;Text&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Codepen:</strong> <a href="http://codepen.io/anon/pen/rVJepm" rel="noreferrer">http://codepen.io/anon/pen/rVJepm</a></p>
  
  <p>How can I fix the sizing when using a SVG?</p>