title: Auto resizing css
body: <p>I'm making a component and am trying to achieve the following ( ideally using flexbox ) without using javascript. Think of it as a messenger chat screen with a header and a footer with controls.</p>
  
  <p><a href="https://i.stack.imgur.com/ukrvrm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ukrvrm.png" alt="enter image description here"></a></p>
  
  <p>Rules:</p>
  
  <ul>
  <li>The size of the pink container could be anything, it does 100% width/height on its parent with a minimum of 200px</li>
  <li>The height of 1 &amp; 3 are also dynamic ( could be 100px , could be 300 depending on text)</li>
  <li>The content in 2 must be scrollable and with a min-height:200px</li>
  </ul>
  
  <p>The main issue im facing is that i want 1,2 and 3 to not overflow the pink container.
  Any ideas? Kinda stumped with this one and not sure if it is the case that im missing some constraints without which the problem is ill described.</p>