Hacker News new | ask | show | jobs
by nox101 524 days ago
My issue with flexbox is that I can't seem to memorize all the settings I need to get boxes within boxes and content to either fill a box or the box to surround the content.

This is particular important on an SPA where I want the boxes to fill the screen but never overflow it. I manage eventually. I need to put the totally intuitive (sarcasm) min-width: 0, here and there, and a few other things here and there and eventually I get it.

I feel like I should be able to make a few css classes to cover all of this but I have yet to figure it out for every case.

1 comments

It's mostly:

- "flex: 1 1 0px" for fill available space

- "flex: 0 0 auto" for sizes to content

And then arguably every flexbox item ought to have min-width (and/or min-height) set to 0 because flexbox has a "min content sized" automatic minimum size built-in, which is rarely what you want. But if the content isn't overflowing or can be compressed in some way then you can get away without this.