5 ms·
Weeeeeeeell a div is 100% width by default. It will always fill the width of the parent container unless you explicitly change the width.
by aidos 3y ago
Weeeeeeeell a div is 100% width by default. It will always fill the width of the parent container unless you explicitly change the width.
- fendy3002 3y agoAfaik div width property is almost useless if the parent set the display as flex, or if the div has no content.
- aidos 3y agoThat’s kinda the point of flex though. The width is determined by the flex rules; width 100% doesn’t make much sense in that context.
- truckerbill 3y agoNot if the parent or ancestors don't have a width set... Hence why you need context.
- aidos 3y agoThe parent has _some_ width, even if it’s not explicitly set.
- truckerbill 3y agoYes, and I wish 100% would respect that implicit width but it doesn't. Try it
- aidos 3y agoAny chance you could show an example? In theory a block level element can only sit inside another block level element. And those expand to the width of their parent unless you constrain the width.
- truckerbill 3y agohttps://jsfiddle.net/jcaysopd/75/ https://jsfiddle.net/jcaysopd/75/ I have no doubt there is a 'logical reason' for the behaviour but it doesn't stop it being annoying to work with.
- aidos 3y agoGotcha. That’s because of the 100% vs auto thing. These days everyone just puts “box-sizing: border-box” on everything to make it go away. This explains a bit more about what you’re seeing http://stackoverflow.com/questions/28353625/why-does-percentage-width-work-even-if-no-explicit-width-value-given-for-contain/28354270#28354270 http://stackoverflow.com/questions/28353625/why-does-percent...
- have_faith 3y ago100% isn’t the default value, ‘auto’ is. Which has the effect of appearing 100% in many scenarios. But not all.
- aidos 3y agoFair, but actually that just means that the border and margin etc are pushed outside the container. In either case the div is operating by taking up the full width of the container.