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 🤔
No description
10 Replies
Coder_Carl
Coder_Carl10mo ago
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 ...
GHOST 👻
GHOST 👻10mo ago
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 :
GHOST 👻
GHOST 👻10mo ago
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 😄
No description
No description
Coder_Carl
Coder_Carl10mo ago
Yup I've just read the article and seen the YT video also
GHOST 👻
GHOST 👻10mo ago
Does this make sense thou 🤔
Coder_Carl
Coder_Carl10mo ago
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)
GHOST 👻
GHOST 👻10mo ago
But why does the flex-shrink doesn't work in this case 🤔
Coder_Carl
Coder_Carl10mo ago
Flex shrink won't shrink past/override the auto min
Kevin Powell
Kevin Powell10mo ago
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
GHOST 👻
GHOST 👻10mo ago
@Kevin i got the point that's interesting 🥸
Want results from more Discord servers?
Add your server