Preventing relayout due to scrollbar

Well, the scrollbar will always push your content aside, there is really nothing you can do about that. What you can do is to always show to scrollbar for example:

html,body {
    height:101%;
}

or

html {
    overflow-y: scroll;
}

You can create a container that have a fixed width, and give the content the same width (same static width - not 100%). that way, when the content overflows the parent, the scroll will not push the content but will flow above it.

using that, you can apply a cool way to scroll without pushing anything. by showing the scroll only when you hover the container.

Check out this simple Demo

EDIT: Here I show the difference between setting static width, and %.

overflow: overlay

Building on avrahamcool's answer, you can use the property overflow: overlay.

Behaves the same as auto, but with the scrollbars drawn on top of content instead of taking up space. Only supported in WebKit-based (e.g., Safari) and Blink-based (e.g., Chrome or Opera) browsers.

Source: MDN

This is great for when you need horizontally-scrolling content and don't want it to change size when scrollbars appear on hover.

Caveat: it is deprecated. Support is pretty much limited to Chromium, but that might go away in the future. See https://caniuse.com/css-overflow-overlay.

However, you can do a fallback of auto:

.container:hover {
    overflow: auto; /* fallback */
    overflow: overlay;
}

Demo: jsfiddle.net/NKJRZ/385/

---

Can I Use also has an interesting note:

This value is deprecated and related functionality being standardized as the scrollbar-gutter property.

However, you should check their link because browser support for this experimental feature is no better than overflow: overlay as of November 2021.