Why Does `100vw` Sometimes Cause Unexpected Horizontal Overflow?

100vw Causing Unexpected Horizontal Overflow

When assigning a width of 100vw to an element, you might expect it to occupy the full viewport width without causing any overflows. However, under certain circumstances, horizontal scrollbars can appear despite using 100vw.

Consider the following example:

html, body {
  margin: 0;
  padding: 0;
}
.box {
  width: 100vw;
  height: 100vh;
}

<div class="box">Screen 1</div>

In this scenario, the .box element will fill the screen without any scrollbars. However, if you add a second .box element below the first one:

<div class="box">Screen 1</div>
<div class="box">Screen 2</div>

You will observe the appearance of not only vertical scrollbars (expected) but also a slight horizontal scrollbar.

The reason for this behavior lies in the way 100vw is interpreted by browsers. While it does mean "100% of the viewport width," it represents the visible portion of the viewport that remains after taking into account any scrollbar thickness. In this case, the presence of a vertical scrollbar reduces the available viewport width, which can cause the second .box element to overflow horizontally.

To resolve this issue, you can use max-width: 100% on the .box element:

.box {
  width: 100vw;
  height: 100vh;
  max-width: 100%;
}

This will ensure that the element never exceeds the true viewport width, effectively preventing any potential horizontal overflow.

The above is the detailed content of Why Does `100vw` Sometimes Cause Unexpected Horizontal Overflow?. For more information, please follow other related articles on the PHP Chinese website!