apparently it also sets: flex-basis: 20%;
min-width: auto;
max-width: auto;
But as I experience it, my flex item becomes larger than 20% because the min-width:auto; sets it so that it becomes minimal content width… which is larger than 20%.
Only when I set flex-basis: 20%; AND min-width: 0px; Only then will all flex items become 20% regardless of content.
When I inspect my page with Firefox I only see flex-basis: 20%; without the added defaults.
This is all very confusing. Why is that? And is there someplace where I can read about all the defaults automatically set in flex?
That’s an interesting question! In Firefox DevTools in the computed tab with active browser styles you can see the change of the min-width value from 0px to auto when changing the parent to display: flex;
I first thought it was in the default browser style sheet, but couldn’t find anything. I had to go deeper an so I dug into the CSS specifications
Note: The auto keyword, representing an automatic minimum size, is the new initial value of the min-width and min-height properties. The keyword was previously defined in this specification, but is now defined in the CSS Sizing module.
So the observed behavior of flex items having `min-width: auto;` is defined by the specification as a reasonable default. As you already found out you can set `min-width: 0;` by yourself to override this default.
To find out which properties change when adding display: flex I made a before and after diff of all computed properties:
inline-size
min-block-size
min-height
min-inline-size
min-width
perspective-origin
transform-origin
width
As it’s expected that the width of the element itself changes when switching to Flexbox we can ignore width and width-dependent properties. That leaves us with:
min-block-size
min-height
min-inline-size
min-width
As the first and third properties are the logical property versions of the other two, we can conclude that only min-width and min-height automatically change when adding Flexbox.
I hope I could give you an interesting insight into the complicated world of CSS
I don think I’ve ever received such a well thought out and elaborate response as yours.
It’s quite complicated as a beginner, and your answer is really helpful. I wasn’t even aware of the computed feature and active browser styles.
I’ve made many notes and doing further research on what you wrote.
Thank you for the kind words. It means a lot
I also learned new things when digging into this topic.
Even when CSS sometimes seems easy to understand and code, you will eventually get into situations where you scratch your head, because things don’t work as you expect them. In such situations it comes in handy if you have the right tools like “Computed”, Flex inspector or Grid inspector. And a great documentation like MDN, of course
Most importantly, never get discouraged. Start reading docs and testing things out. Eventually you will not just learn a solution for the particular problem, but also deepen your knowledge about a topic.
