Scroll bar on flexed overflow-y misaligns it from other elements

Question

Quite a hefty snippet but this is the basic layout for a site I'm working on and the issue is actually really simple - I'm using a width container, same width on the navbar and the main elements - everything aligns great except when I use overflow-y: auto to create a scroll bar on the main element.

Because of the scrollbar, the centre of the main body is now a few pixels short.

Is there a way to stop the browser from auto-adjusting the center of the view when a scroll bar is present?

I haven't yet tested on other browsers but I'm seeing this on firefox, I'm just wondering if there's a simple fix for all browsers or if it's just something we have to live with.

Here it is with the overflow added:

And here it is without:

You can see the centered white portion in the navbar is misaligned with the body's centered light grey portion.

html {
  height: 100%;
  font-size: calc(1em + 1vw);
}

body {
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
  background-color: #ccc;
  box-sizing: border-box;
}

header {
  display: flex;
  justify-content: center;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px;
  z-index: 1000;
}

main {
  display: flex;
  overflow-y: auto;
  justify-content: center;
  flex: 1 0 0px;
}

.navTop-widthContainer {
  max-width: 536px;
  flex: 1 0 0px;
  display: flex;
  background-color: #fff;
}

.navTop {
  display: inline-flex;
  flex-direction: row;
  flex: 1 0 auto;
  flex-shrink: 0;
}

.navTop div {
  display: flex;
}

.floatRight {
  margin-left: auto;
  order: 2;
}

.f-d {
  display: flex;
  flex-direction: column;
}

.f-d div {
  display: flex;
  justify-content: center;
}

.widthContainer {
  max-width: 536px;
  background-color: #eee;
  border-left: solid 1px #ddd;
  border-right: solid 1px #ddd;
  color: #242424;
}

<body>
  <header>
    <div class="navTop-widthContainer">
      <nav id="navTop" class="navTop" role="navigation">
        <div>
          <a href="/Services">Services</a>
          <a href="/Customer">Shopping</a>
        </div>

        <div class="floatRight">
          <a id="register" href="/Identity/Account/Register">Register</a>
          <a id="login" href="/Identity/Account/Login">Login</a>
        </div>
      </nav>
    </div>
  </header>

  <main>
    <div class="widthContainer f-d">
      <div>
        <p>Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill
          text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text
          Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill
          text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text
          Fill text Fill text Fill text Fill text Fill text Fill text</p>
      </div>
    </div>
  </main>
</body>

doğukan · Answer 1 · 2020-06-16T13:26:23.263

I made a little trick. First of all, I add overfloy-y: scroll to header so that it had the same scrollbar. As you can see:

html {
  height: 100%;
  font-size: calc(1em + 1vw);
}

body {
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
  background-color: #ccc;
  box-sizing: border-box;
}

header {
  display: flex;
  justify-content: center;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px;
  z-index: 1000;
  overflow-y: scroll;
}

main {
  display: flex;
  overflow-y: auto;
  justify-content: center;
  flex: 1 0 0px;
}

.navTop-widthContainer {
  max-width: 536px;
  flex: 1 0 0px;
  display: flex;
  background-color: #fff;
}

.navTop {
  display: inline-flex;
  flex-direction: row;
  flex: 1 0 auto;
  flex-shrink: 0;
}

.navTop div {
  display: flex;
}

.floatRight {
  margin-left: auto;
  order: 2;
}

.f-d {
  display: flex;
  flex-direction: column;
}

.f-d div {
  display: flex;
  justify-content: center;
}

.widthContainer {
  max-width: 536px;
  background-color: #eee;
  border-left: solid 1px #ddd;
  border-right: solid 1px #ddd;
  color: #242424;
}

<body>
  <header>
    <div class="navTop-widthContainer">
      <nav id="navTop" class="navTop" role="navigation">
        <div>
          <a href="/Services">Services</a>
          <a href="/Customer">Shopping</a>
        </div>

        <div class="floatRight">
          <a id="register" href="/Identity/Account/Register">Register</a>
          <a id="login" href="/Identity/Account/Login">Login</a>
        </div>
      </nav>
    </div>
  </header>

  <main>
    <div class="widthContainer f-d">
      <div>
        <p>Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill
          text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text
          Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill
          text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text
          Fill text Fill text Fill text Fill text Fill text Fill text</p>
      </div>
    </div>
  </main>
</body>

Then I hidden the scrollbar in the header.

(Yes it does not works in Firefox.)

html {
  height: 100%;
  font-size: calc(1em + 1vw);
}

body {
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
  background-color: #ccc;
  box-sizing: border-box;
}

header {
  display: flex;
  justify-content: center;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px;
  z-index: 1000;
  overflow-y: scroll;
}

header::-webkit-scrollbar{
  visibility:hidden;
}

main {
  display: flex;
  overflow-y: auto;
  justify-content: center;
  flex: 1 0 0px;
}

.navTop-widthContainer {
  max-width: 536px;
  flex: 1 0 0px;
  display: flex;
  background-color: #fff;
}

.navTop {
  display: inline-flex;
  flex-direction: row;
  flex: 1 0 auto;
  flex-shrink: 0;
}

.navTop div {
  display: flex;
}

.floatRight {
  margin-left: auto;
  order: 2;
}

.f-d {
  display: flex;
  flex-direction: column;
}

.f-d div {
  display: flex;
  justify-content: center;
}

.widthContainer {
  max-width: 536px;
  background-color: #eee;
  border-left: solid 1px #ddd;
  border-right: solid 1px #ddd;
  color: #242424;
}

<body>
  <header>
    <div class="navTop-widthContainer">
      <nav id="navTop" class="navTop" role="navigation">
        <div>
          <a href="/Services">Services</a>
          <a href="/Customer">Shopping</a>
        </div>

        <div class="floatRight">
          <a id="register" href="/Identity/Account/Register">Register</a>
          <a id="login" href="/Identity/Account/Login">Login</a>
        </div>
      </nav>
    </div>
  </header>

  <main>
    <div class="widthContainer f-d">
      <div>
        <p>Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill
          text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text
          Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill
          text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text
          Fill text Fill text Fill text Fill text Fill text Fill text</p>
      </div>
    </div>
  </main>
</body>

Upvoted because it's a good suggestion - I had considered adding a scrollbar to it but didn't know I could hide it (btw it's not actually being hidden on my Firefox browser here when I run the snippet) - also in the case when the main `overflow:auto;` doesn't result in a scrollbar because the contents are short, this would leave me with the same issue except the other way round! — jamheadart, Jun 16 '20 at 13:21
I think actually my only real solution here, because of the different widths of scrollbar on different browsers is to make the width on the navbar a bit smaller than the rest of the page, so it doesn't look so obvious that it's off-center — jamheadart, Jun 16 '20 at 13:25
I think only a real solution can be offered with javascript. — doğukan, Jun 16 '20 at 13:30
Actually I just found a great solution: `padding-left: calc(100vw - 100%);` to apply to my `main` element, on another thread: https://stackoverflow.com/questions/1417934/how-to-prevent-scrollbar-from-repositioning-web-page/7607206 - it means I have to rethink the background colour for the widthcontainer but that's fine. I'll just create another div inside the width container. — jamheadart, Jun 16 '20 at 13:31

Scroll bar on flexed overflow-y misaligns it from other elements

1 Answers1