title: Flex item won't consume available space in container when second flex item introduced
body: <p>I have a container named <code>#center</code> in which I want to display <code>canvas</code> and a <code>button</code> inside it. I want the <code>canvas</code> object to take all the available space (respecting the button inside the container).</p>
  
  <p>This is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
    width: 100%;
    height: 100%;
  }
  #container {
    display: flex;
    height: 100%;
    background-color: blue;
  }
  .block {
    flex: 1;
  }
  #left {
    background-color: green;
  }
  #center {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-content: flex-start;
  }
  #right {
    background-color: orange;
  }
  
  #canvasObject {
    display: block;
    margin: 0 auto;
    border: 1px solid;
    background-color: yellow;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
    &lt;div id="left" class="block"&gt;Left&lt;/div&gt;
    &lt;div id="center" class="block"&gt;
      &lt;canvas id="canvasObject"&gt;Your browser does not support Canvas.&lt;/canvas&gt;
      &lt;button type="button"&gt;Click!&lt;/button&gt;
    &lt;/div&gt;
    &lt;div id="right" class="block"&gt;Right&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If I do not have any <code>button</code> in my code, <code>canvas</code> occupy the full <code>div</code> but when I display the <code>button</code>, <code>canvas</code> does not seem to resize the desired <code>height</code>.</p>
  
  <ul>
  <li><a href="https://jsfiddle.net/9j1ddeLb/" rel="nofollow">Example 1</a>: Without button.</li>
  <li><a href="https://jsfiddle.net/9j1ddeLb/1/" rel="nofollow">Example 2</a>. With button.</li>
  </ul>
  
  <p>How can I make that the <code>canvas</code> object will resize until the available <code>height</code> (also <code>width</code> but it is already doing it)?</p>
  
  <p>Thanks in advance!</p>