title: Flex cuts off child items
body: <p>I have the following code structure</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>.parent {
    display: flex;
    flex-direction: column;
  }
  
  .img {
    width: 100%
  }
  
  .content {
    flex: 1;
    overflow-y: scroll;
  }
  .container {
    border: 1px solid;
    display: flex;
    flex-direction:column;
    margin:20px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="parent"&gt;
    &lt;img src="https://www.everythingcarers.org.au/media/1982/sample.jpg"/&gt;
    &lt;div class="content"&gt;
    &lt;/div&gt;
    &lt;div class="footer"&gt;
      &lt;div class="container"&gt;
         &lt;div&gt;&lt;button&gt;Button1&lt;/button&gt;&lt;div&gt;
         &lt;div&gt;&lt;button&gt;Button2&lt;/button&gt;&lt;div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What I want is the footer to occupy its original width and height(height: 144px) , and make the content scrollable based on the available space according to screen resolution.Currently, the footer is getting cut off on some screens. I've tried  changing the flex values for content and footer, but it doesn't work.Thanks</p>