How to prevent vertical scrollbar from reducing layout width (avoid 8px shift) when scrollbar appears [closed]

Title: How to prevent vertical scrollbar from shifting fixed-width horizontal layouts on Windows?

I am working on a fixed-width dashboard (1920px) where I have a row of exactly 7 input fields. Due to the design requirements, these inputs must remain on a single line. However, I am encountering a layout shift issue on Windows browsers when a vertical scrollbar appears.

The Problem:
My layout has 70px side padding. When the vertical scrollbar appears (typically 8–15px wide on Windows), the usable viewport width drops from 1920px to roughly 1905px. This slight reduction causes the 7th input to wrap to a new line, breaking the UI.

What I have tried:

scrollbar-gutter: stable: I applied this to the html and body tags. While it prevents the "jumping" effect by reserving space, it doesn't guarantee a constant width because some browsers still reclaim that space when no scrolling is possible.

css

html, body { overflow-y: auto; scrollbar-gutter: stable; }

Use code with caution.

Webkit Scrollbar Styling: I attempted to narrow the scrollbar, but it still occupies layout space regardless of its width.

css

.container::-webkit-scrollbar { width: 8px; }

Use code with caution.

Legacy overflow: overlay: I tested this property, but as it is non-standard, modern browsers simply treat it as overflow: auto.

Negative Margin Hack: I tried compensating for the scrollbar width by using negative margins, but this feels fragile as scrollbar widths vary across different Windows versions and scaling settings.

My Constraints:

The vertical scrollbar should only appear when needed (not be permanently visible).

The scrollbar should not reduce the available layout width (overlay behavior).

I want to avoid layout shifts without relying on hardcoded pixel values for scrollbar widths.

Question:
Is there a standard, cross-browser CSS or JavaScript method to achieve an "overlay" scrollbar on Windows that does not consume layout space? Or is this behavior fundamentally locked to the OS/Browser settings, meaning I must design my layout to be fluid enough to absorb those 15 pixels?

---