confusing info
What does min-width :0; in this exemple really does, looks weird cause it's like including overflow-x :hidden; but instead bro really includes min-width which make no sense thou 🤔
10 Replies
It appears that until css3 that it was set to 0 by default.
A measurement of 0 without a unit type would normally be considered an invalid unit. I'm unsure how it works and am on my phone so can't check if it is invalid or not 🤷
Auto is allowing the browsers opinionated widths to be used.
I hate browser inconsistencies ...
Imagine just a card with an overflow-x to right (ex:text) that's what do min-width used for we already have such of three props that solve the problem but As a simple solution this man said that min-width works well 👍 i didn't understand that but seems interesting 😉
Have a look :
Here's the difference with or without including min-width even if flex-shrink is set to 1 the browser override that for some reason 😄
Yup I've just read the article and seen the YT video also
Does this make sense thou 🤔
After reading how css treats "0" it does.
It's a valid measurement. And it removes the auto that the browser was using previously (which prevents those min width overflow shenanigans)
But why does the flex-shrink doesn't work in this case 🤔
Flex shrink won't shrink past/override the auto min
like Carl said,
flex-shrink doesn't mean "it can get to zero", it means "it can get to as small as it's allowed to get".
By default, flex items will behave a lot like fit-content, in that they'll shink as small as the smallest bit of content inside of them. By default, it doesn't want to cause overflow through shrinking.
Inputs are a little strange, because they aren't like regular content, like text. They come with a default size on them, essentially, so the shrink stops when it hits that size.
This is why I prefer grid for forms 😄 The input will match the size of the column. Here's a very simple demo of what I mean:
https://codepen.io/kevinpowell/pen/BabWJoO??editors=1100@Kevin i got the point that's interesting 🥸