Flexboxes are the best yet most annoying elements to work with in web development.

And yet, they are infinitely better than it used to be

I could name 10 significantly more annoying layouts if you cut out two thirds of my brain and made me stay up for 3 weeks before answering.

I'd sterilize myself with a blunt stone if it meant "float" never existed.

@AlgoRythm Almost forgot about float ☠️

How are they annoying? I’ve yet to find it but I can believe it…

@MM83 Tried centering an element which is larger than the container it is in?

Hint: Overflow doesn't give an easy way out, still waiting for safe center 🥲

@MM83 @AlphaGaurav flex elements by default have a minimum width/height which fits its contents.

Normal block/inline-block layout elements have a minimum width/height of zero.

This means that flex elements will expand forever rather than scrolling.

The only fix is a rather obscure CSS rule (setting min width/height to zero) which ONLY makes sense if you know what the fuck is happening.

@AlgoRythm And then people say HTML CSS is quite basic ( ._.)

@AlphaGaurav its when you dont try to do fancy things

The main gotcha for me is that an element that you expect to wrap - such as a typical paragraph of text - will just expand the width of the flex-child element. WTF? You expect the size of any div child (and its position) to be set by the whizzy flex-parent and flex-child rules. For me, an easy solution that makes everything work as expected is to set up the flex-parent and flex child divs *and then add a div inside the flex-child elements, which will contain your content*. Widths then work as expected, meaning as described very nicely on css-tricksDOTcom i.e. paragraphs and similar content are restrained in their widths as per the flex rules that you set up.

@AlgoRythm yeah good point, I normally define a div {} rule with flex-direction as column, grow and basis as 0 etc so it’s a bit more like what I’m used to. The biggest fucker I’ve had with it is overflow scrolling, normally just whack what I want to scroll in a non flex parent div rather than get the rules to play nicely.