Vertical scrollbar causes horizontal scrollbar in TailwindCSS

Question

I am using TailwindCSS. Whenever I have a page, a vertical scrollbar appearing (because the page is higher than the screen), also causes a horizontal scrollbar to appear. The issue only appears in Chrome and Edge, but not in Firefox or GNOME Web.

I narrowed down the issue to my footer:

<footer class="w-screen bg-gray-700 flex flex-col items-center text-gray-300 py-8 gap-4 px-10 md:px-4">
    <div class="max-w-6xl flex gap-4 p-4 w-full flex-col md:flex-row">
        <div class="flex-grow basis-1/12">
            <div class="text-2xl">Website Name</div>
            <div>This is the tagline of our website website.</div>
        </div>
        <div class="flex-grow basis-0">
            <h1 class="text-xl text-gray-100">Social</h1>
            <ul class="text-sm">
                <li>
                    <a class="hover:underline hover:text-gray-100" href="https://example.org/">Example Social</a>
                </li>
                <li>
                    <a
                        class="hover:underline"
                        href="https://example.org/">Example Social</a
                    >
                </li>
                <li>
                    <a class="hover:underline hover:text-gray-100" href="https://example.org/">Example Social</a
                    >
                </li>
            </ul>
        </div>
        <div class="flex-grow basis-0">
            <h1 class="text-xl text-gray-100">Operating Status</h1>
            <ul class="text-sm">
                <li>Address:</li>
                <li class="">&gt; example.org/api</li>
                <li id="api-status">Server Status Unknown</li>
            </ul>
        </div>
        <div class="flex-grow basis-0">
            <h1 class="text-xl text-gray-100">Help</h1>
            <ul class="text-sm">
                <li>
                    <a class="hover:underline hover:text-gray-100" href="/info">Information</a>
                </li>
                <li>
                    <a class="hover:underline hover:text-gray-100" href="/info">Information</a>
                </li>
            </ul>
        </div>
    </div>
    <hr class="max-w-6xl w-full" />
    <div>© {currentYear} - All Rights Reserved</div>
</footer>

Removing the footer removes the bug, even if the webpage is still too high.

See also [this related question](https://stackoverflow.com/questions/13569610/vertical-scrollbar-leads-to-horizontal-scrollbar): "Vertical Scrollbar leads to horizontal scrollbar". And [this duplicate](https://stackoverflow.com/questions/19601981/vertical-scrollbar-causes-horizontal-scrollbar) "Vertical Scrollbar Causes Horizontal Scrollbar". — cachius, Mar 28 '23 at 13:13

score 0 · Accepted Answer · answered Feb 25 '23 at 15:52

The issue is the w-screen class added to the footer. This makes the footer equal to the width of the browser window, including the scrollbar. You want to use w-full instead, which makes the footer equal to the width of the viewable area, excluding the scrollbar.

<footer class="w-full bg-gray-700 flex flex-col items-center text-gray-300 py-8 gap-4 px-10 md:px-4">
    <!-- FOOTER CONTENTS HERE -->
</footer>

The issue does not occur on Firefox or GNOME Web, because those browsers do not have a scrollbar width, and the scrollbar is instead overlaid on the webpage.

Vertical scrollbar causes horizontal scrollbar in TailwindCSS

1 Answers1