title: responsive flex column with svg
body: <p>I'm trying to setup a panel on the right of my page. It will have some inline elements and a svg image in the middle.</p>
  
  <p>I'd like the panel to be max 50% of width and 100% height. The SVG image should grow while preserving aspect ratio to fill the available height. Thus the container will get wider. It should stop growing when height is filled OR container width reach 50%.</p>
  
  <p>Here is what I've come up with:</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;
    box-sizing: border-box;
  }
  
  body {
    background: #333;
  }
  
  #viewport {
    background: #FFF;
    transition: all 200ms;
    padding: 5px;
    position: relative;
    animation: sizing 8s infinite;
  }
  
  .column {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    padding: 10px 15px;
    border: 1px dotted #000;
    max-height: 100%;
    max-width: 50%;
  }
  
  .svgContainer {
    flex: 1;
  }
  
  .svgContainer svg {
    max-width: 100%;
    max-height: 100%;
  }
  
  @keyframes sizing {
    0% {
      width: 300px;
      height: 200px;
    }
    25% {
      width: 500px;
      height: 200px;
    }
    50% {
      width: 500px;
      height: 400px;
    }
    75% {
      width: 300px;
      height: 400px;
    }
    100% {
      width: 300px;
      height: 200px;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="viewport"&gt;
    &lt;div class="column"&gt;
      &lt;h4&gt;Some header&lt;/h4&gt;
      &lt;div class="svgContainer"&gt;
        &lt;svg viewBox="0 0 300 214" width="300" height="214"&gt;
          &lt;rect x="0" y="0"
            width="300" height="214" 
            stroke-width="5"
            stroke="#F00"
            rx="15" ry="15"
            fill="none"/&gt;
           &lt;circle cx="150" cy="107" r="80" stroke="#F00" stroke-width="5" fill="none"/&gt;
      &lt;/svg&gt;
      &lt;/div&gt;
      &lt;button&gt;some button&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I've added an animation on the viewport size to illustrate several issues:</p>
  
  <ol>
  <li>when viewport is narrow, the panel content overflow. I'd like the svg to shrink instead.</li>
  <li>when panel is too high there is space between the svg and the button, I'd like to move this space under the button.</li>
  </ol>
  
  <p>I did it with flexbox (<code>flex-direction: column</code> + <code>flex:1</code>) but it seems like I'm missing something</p>