Horizontal scrollbar / overflow-x on Chrome is triggered even though elements is set to w-screen (100vw;) (Tailwind, NextJS 13.4+)

Issue

Took a little while to track down the root of this issue in a bigger project -- hopefully this Question and Answer will help somebody else.

---

This is the scenario -- you have a NextJS/Tailwind project, there is almost nothing on screen except one large vertical element with width set in Tailwind to w-screen which in ccs is width: 100vw;.

---

These questions arise:

• if width is set to 100vw, why would the horizontal bar be triggered?
• is default NextJS/Tailwind silently creating some margins/padding I should be aware of?
• do I need to manually set something globally like 'box-sizing: border-box';`

---

Here is the code snippet for clarity: (I used the simplest code to isolate the issue.):

//app/page.js
'use client'
import React from 'react';

export default function Page(props) {

return (
    <div className='w-screen'>
      <div className='bg-blue-500'>
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
        ASDF
        <br />
      </div>
    </div>
  );
}

Solution

Long-story short. This is the expected behavior!
The vertical scrollbar takes up horizontal space. This then triggers the horizontal scroll.

---

So the details: Yes, w-screen is width: 100vw; and no, no extra horizontal width or padding or margin has been silently introduced.

Here is what is happening. The large div triggers the vertical scrollbar (as expected).

This vertical scrollbar has some horizontal width and thereby takes up some of this horizontal space of the page (and thereby leaving less than the 100vw for the div element to display into). This, thereby, triggers the overflow-x/ horizontal scrollbar.

---

So this is what does not work (creates horizontal bar):

• <div className="w-screen">

This is what works (no horizontal bar) tailwind class with corresponding css:

• <div className="">
• <div className="w-full"> //width: 100%;
• <div className="max-w-full"> //max-width: 100%;
• <div className="max-w-screen-2xl"> //max-width: 1536px;
• <div className="max-w-7xl"> //max-width: 80rem; 1280px

And this is what works but maybe is less relevant as the element does not fill up the screen in the code snippet in question (no horizontal bar):

• <div className="max-x-max"> //max-width: max-content;
• <div className="max-w-fit"> //max-width: fit-content;

Answered By - Octo Palm Tree