Fix chatbox to bottom, or adapt height to content
<p><strong>NO JS, Only CSS, flexbox allowed</strong></p>

<p>JsFiddle : <a href="https://jsfiddle.net/ex9fmqxv/" rel="nofollow noreferrer">https://jsfiddle.net/ex9fmqxv/</a></p>

<pre><code>.mdl-layout
 .mdl-layout__inner-container
   .mdl-layout__header
   .mdl-layout__drawer
   .mdl-grid
    .mdl-cell
      ul (list-msg adaptive height)
      div (chat box fixed to bottom)
   .mdl-grid (user list)
</code></pre>

<p>I am trying to do a test of a responsive website in 100% height/width of the screen using for GMD react.</p>

<p>I would like every time we resize the window, it can recalculate the height of the content and adapt to this one like Slack.com.</p>

<p>Using jQuery I know how to calculate height to put all this well but without using anyone have any idea?</p>

<p>In the picture you can see what I want that calculation automatically.</p>

<p>If you have another solution for the chat bar is still footer and the central content is scrollable I'm interested.</p>

<p><a href="https://i.stack.imgur.com/6XUlo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6XUlo.png" alt="enter image description here"></a></p>