What is the difference between ‘width: 100%’ and ‘width: 100vw’ in CSS ?

The CSS width Property is used to set the width of the text and images. The width can be assigned to the text and images in the form of pixels(px), percentages (%), centimeters (cm), etc.

The width: 100% sets an element’s width relative to its containing block, making it responsive within its parent. The width: 100% responds to the container’s size.

The width: 100vw sets the width relative to the viewport, making the element span the full viewport width. The width: 100vw always spans the entire viewport width, potentially causing horizontal scrollbars.

The choice depends on whether you want responsiveness within a container or a full-width element relative to the viewport.

Difference between width: 100% and width: 100vw

Aspect	width: 100%	width: 100vw
Reference Point	Relative to containing block	Absolute, relative to the viewport width
Responsive Layouts	Adjusts to the parent container’s width	Spans full viewport width regardless of container
Scrollbars	Typically avoids horizontal scrollbars	May trigger horizontal scrollbars if content overflows viewport
Nested Containers	Suitable for responsive components within a container	Ideal for full-width sections or backgrounds
Viewport Dependency	Responsive to containing element’s size	Independent of containing element’s size
Use Cases	Responsive grids, flexible layouts within a container	Full-width hero sections, backgrounds covering the viewport