1

Codepen: https://codepen.io/andrerpena/pen/JjBzKNg

enter image description here

I would like the button bar to always be visible where the blue --> is pointing, when the screen squeezes.

My document structure is like this:

  • div[@id='title']
  • div[@id='body'] <-- This should grow
    • div[@id='body-content'] <-- This should grow and be scrollable
    • div[@id='body-buttons'] <-- This should be fixed at the bottom

According to the above structure, I'd expect body-content to scroll and body-buttons to always be visible.

Why is it not? Is there any way to fix it without changing the DOM structure? If not, how would you change it?

I'm personally interested in knowing why it doesn't work, because I do CSS for more than a decade and I still get surprised by stuff like this.

Thanks.

Andre Pena
  • 56,650
  • 48
  • 196
  • 243

1 Answers1

1

Flex child has an initial value min-height: auto which means that it will not have height less than the content height (the texts). In this case you can add min-h-0 class to the div[@id='body'] (#body) element so that it doesn't have to have a minimum height. Here's the working codepen.

Damzaky
  • 6,073
  • 2
  • 11
  • 16