does input box has a minimum width set by default?
even though i have not given my input box a width or min-width.. it still never goes below 202px.. is it becuz input box has a min width set by default?
12 Replies
yes it does
it has a min-width value?
i googled it but didnt find any answer
it has min-width set on it by the browser iirc
don't think you can see it in dev tools
btw
why is it that when i gave the input box the min width of value 0 then nothing happened ( its min-width was still 200px something )
An Interactive Guide to Flexbox
When we truly learn the secrets of the Flexbox layout mode, we can build absolutely incredible things. Fluid layouts that stretch and shrink without arbitrary breakpoints. In this action-packed interactive tutorial, we'll pop the hood on the Flexbox algorithm and learn how to do remarkable things with it. ✨
but when i gave the input box container the min-width of 0 then it started going below 200px
thats crazy
i had no idea about this
it doesn't have a
min-width. It has a width and inline-size (the same as width however it makes it function accordingly with different writing modes). You can see them in the dev tools here. That is why it isn't shrinking, it has has a fixed width.
but why it becomes shrinkable only when i set the min-width property to 0
its not happening with other properties
are you using flexbox?
yes
the default value of every flexbox item is
min-width: 100%; and max-width: 100%;, meaning the smallest they can be and biggest they can be is their natural size. When you set it to 0, it's allowing it to shrink below it's size.