Difference between width set to 100% vs 100vw vs auto
Hello, can someone explain what is the difference to width property in css when we use 100%, 100vw and auto as values?
100vw is always relative to viewport width?
100% is always relative to parent container?
What about auto?
11 Replies
100% accounts for the scrollbar
100vw ignores the scrollbar
if you set something to 100vw, and the scrollbar is visible, it will cause overflow since the visible area is smaller than 100vw
that wont happen with 100%
ah ok
didn't know that it was possible
it is because it's the viewport size, and the viewport has the scrollbars inside
try it
yep will try it will come back
yeahh didn't know that, basically, technically viewport is what we see on the screen but it also includes the scrollbars ?
yup
just imagine that the scrollbar belongs to the <body> or <html> element
yep I see
many forget this tiny detail and end up having weird results
yep
I will add that
auto (on a block element) will fill the available space, even if it has a margin on the left or right.
With percentage, that's added on top, so if you have something like
this will overflow by 50px. If you change it to auto, it won't overflow.that is also important to keep in mind
Oh ok noted, thanks !