Why Do Multiple 100vw Width Elements Create Horizontal Scrollbars?

100vw Horizontal Overflow Mystery

In the realm of web development, the 100vw unit is commonly used to set the width of elements to occupy the full viewport width. However, a curious issue arises when multiple elements with 100vw width are placed consecutively. Instead of filling the screen as expected, vertical scrollbars appear along with an inexplicable horizontal scroll.

To understand this phenomenon, let's delve into the CSS code:

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

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

With a single element, the div fills the entire screen width without any scrolling. However, adding another div with the same class results in the aforementioned scrolling issue:

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

The culprit behind this behavior lies in the nature of 100vw. While it does represent 100% of the viewport width, it's a fluid unit that fluctuates with changes in the viewport size. For example, if the user resizes the browser window narrower, the divs will shrink accordingly, maintaining their 100vw width.

With multiple divs using 100vw, when the window is wide enough, there's ample space for them to fit side-by-side. However, when the window shrinks below a certain width, the divs can't shrink any further. Instead, they begin to overlap, creating a horizontal overflow.

The vertical scrollbars emerge as a consequence of the overlapping. The browser introduces the scrollbars to allow users to scroll horizontally and access the content hidden under the overlapping divs.

To rectify this issue, one can employ a max-width property on the divs, limiting their maximum width to 100%:

.box {
  max-width: 100%;
}

By doing so, the divs will still occupy the full viewport width as long as there's sufficient space. However, when the window narrows and the divs can't fit side-by-side, they'll shrink and stack vertically, eliminating both the horizontal overflow and the need for horizontal scrolling.

The above is the detailed content of Why Do Multiple 100vw Width Elements Create Horizontal Scrollbars?. For more information, please follow other related articles on the PHP Chinese website!