title: Children of overflowing flex container exceed container
body: <p>I've been on this for a while now and tried a lot of the solutions I've seen across different Stackoverflow questions / blogposts / ... But I honestly can't figure out what's going wrong.</p>
  
  <p>I've got a flexed div with two divs in there. The top div A has a fixed height, the other div B fills the rest using <code>flex: 1;</code>. If the screen is resized and it's smaller than the height of A + B together, then B will start overflowing. I want it to scroll, but I also want the content to be fully visible when scrolling. For some reason which I can't figure out, the content renders out of the top of div B as you can see in this screenshot of <a href="https://codepen.io/InstaK/pen/ZwWvxQ" rel="nofollow noreferrer">my fiddle</a>:</p>
  
  <p><a href="https://i.stack.imgur.com/XsyYZ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XsyYZ.jpg" alt="enter image description here"></a></p>
  
  <p>Some of the previously asked questions got me somewhere. For example setting the body to <code>height: auto;</code>, but then when my screen is bigger than A + B it can't be center aligned anymore. <code>min-height: 0;</code> also doesn't seem to help in this case.</p>
  
  <p>How can I make sure my container overflows but will fully show the content of it?</p>