Explain why 100vw can cause horizontal scroll on some browsers and how to avoid it.

Explain why 100vw can cause horizontal scroll on some browsers and how to avoid it.

• A. Because 100vw is always larger than the viewport.
• B. It excludes scrollbar width causing content to overflow.
• C. It includes the scrollbar width, causing horizontal overflow in some browsers; avoid by using width: 100% or calc(100vw - <scrollbar-width>).
• D. It is the same as 100% width.

Answer: (C)

Viewport width units measure relative to the browser window; 1vw is 1% of the window’s width. In some browsers, when a vertical scrollbar is visible, 100vw includes that scrollbar area, so an element sized to 100vw ends up slightly wider than the actual content area. That mismatch can push content to overflow horizontally and trigger a horizontal scrollbar. To avoid this, fill the available content width instead of the full window width—use width: 100% so the element stays inside the content area. If you need a viewport-tied width, subtract the scrollbar space explicitly, for example with width: calc(100vw - <scrollbar-width>), keeping in mind scrollbar width varies by OS and browser. Also ensure box-sizing is border-box so padding and borders don’t push the total width beyond the intended value.

Viewport width units measure relative to the browser window; 1vw is 1% of the window’s width. In some browsers, when a vertical scrollbar is visible, 100vw includes that scrollbar area, so an element sized to 100vw ends up slightly wider than the actual content area. That mismatch can push content to overflow horizontally and trigger a horizontal scrollbar. To avoid this, fill the available content width instead of the full window width—use width: 100% so the element stays inside the content area. If you need a viewport-tied width, subtract the scrollbar space explicitly, for example with width: calc(100vw - ), keeping in mind scrollbar width varies by OS and browser. Also ensure box-sizing is border-box so padding and borders don’t push the total width beyond the intended value.