title: Dynamic size of footer with full screen web page
body: <p><a href="https://i.stack.imgur.com/f0y5j.png" rel="nofollow noreferrer">image wireframe</a></p>
  <p>I would like to recreate messaging phone app in html and css. So the app must be full frame without any overflow.
  The trick is the bottom part (in red) must be resizable according to the child content. So I used flex (with flex-direction: column) to manage my layout.</p>
  <p>The problem is : when the content (in yellow) grow up, the core part will compress the red part. My goal is to overflow, with a scrollbar, the content inside the core part and don't change the size of the red div.</p>
  <p><em>index.html</em></p>
  <pre><code>&lt;body&gt;
  &lt;div id=&quot;header&quot;&gt;
  &lt;/div&gt;
  &lt;div id=&quot;core&quot;&gt;
      &lt;div class=&quot;conainer&quot; style=&quot;&quot;&gt;
          &lt;div class=&quot;row&quot;&gt;
              &lt;div class=&quot;two columns&quot;&gt;&lt;/div&gt;
              &lt;div class=&quot;ten columns&quot;&gt;
                  &lt;div class=&quot;msgright&quot;&gt;
                      .
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;row&quot;&gt;
              &lt;div class=&quot;ten columns&quot;&gt;
                  &lt;div class=&quot;msgright&quot;&gt;
                      .
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;two columns&quot;&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id=&quot;footer&quot;&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><em>index.css</em></p>
  <pre><code>html, body, div {
      margin: 0;
      padding: 0;
  }
  
  html, body {
      height: 100%;
    max-height: 100%;
    overflow: hidden;
  }
  
  body {
      display: flex;
      flex-direction: column;
  }
  
  #header {
      height: 50px;
      background: #2A9D8F;
    flex: 0 0 auto;
  }
  
  #core {
      background-color: #264653;
      flex: 1;
      display: flex;
      align-items: flex-end;
  }
  
  #footer {
      height: auto;
      background-color: red;
      min-height: 50px;
      flex: 0 0 auto;
  }
  
  .conainer {
      flex: 0 0 100%;
  }
  
  .row {
      margin: 5px;
      background-color: yellow;
      height: 130px;
  }
  </code></pre>
  <p><a href="https://codepen.io/jln_brtn/pen/pobVZBv" rel="nofollow noreferrer">https://codepen.io/jln_brtn/pen/pobVZBv</a></p>
  <p>Best regards and thank you for your help.</p>