Certain HTML elements, like a div or a p , will stretch to take up the full available width by default. If you give them a horizontal margin , it won’t cause a horizontal scrollbar. This is an incredibly useful default behaviour. Of course, many other elements aren’t full-width by default. Let’s look at a few instances where width: 100% comes in handy, before looking at a newer alternative.

The default dimensions of an image are defined by the embedded image’s intrinsic size. It’s necessary to give large images a width of 100% to prevent overflow.

Want a button or a select element to be full width? You’ll need to apply width: 100% .

If you add a left or right margin to any element with a width set to 100% , it will cause overflow, leading to a horizontal scrollbar.

This could already be solved by using calc to subtract the combined value of both margins. So if you had a left and right margin of 24px , the following would work:

button {
    width: calc(100% - 48px);
    margin-inline: 24px;
If you later decide to update the visual design by changing the size of the margins, you’d also need to change the value in the calc function. There’s now a simpler approach that lets you avoid math entirely: the stretch keyword.
button {
    width: stretch;
    margin-inline: 24px;
This property allows other elements to adopt the auto behaviour of divs and paragraph elements: stretch to fill the available width while also allowing for the unproblematic use of margins.
The stretch keyword is also specced to work when specifying height and  flex-basis.
Browser support
stretch is one of the few CSS properties that still requires a vendor prefix. The following code should work in all browsers:
width: -webkit-fill-available;
width: -moz-available;