Overflow causes global scrollbar to appear even with parent element `overflow: auto`

Question

I want to have two containers(green and red in the example) to be sized 100% of available space(in the example all space except header). Second column have large content which overflows vertically. I would like only second column to have scrollbar without body scrollbar. If I remove header everything works as intended but with header I see global scrollbar. Why?

body {
  padding: 0;
  margin: 0;
  height: 100%;
}

html {
  height: 100%;
}

.main {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.container {
  display: flex;
  flex: 1;
  height: 100%;
}

.left {
  width: 200px;
  height: 100%;
  background: green;
}

.right {
  width: 200px;
  height: 100%;
  background: red;
  overflow: auto;
}

<div class="main">
<div>Header</div>
<div class="container">
  <div class="left"></div>
  <div class="right">
    <div style="height: 4000px;"></div>
  </div>
</div>
</div>

Chaz · Accepted Answer · 2020-09-08 15:48:49Z

1

Is this what you need?

Problem imho is that the column is overflowing the container as well which defaults to
overflow: visible

I set the overflow of container to hidden
Then I set the header to 25px fixed (which is optional)
Left column should now take 100% of container height correctly.
Right column should overflow: scroll within parent container.

If you know right column will overflow vertically you might as well use:
overflow-y: scroll;

body {
  padding: 0;
  margin: 0;
  height: 100%;
}

html {
  height: 100%;
}

.main {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.container {
  display: flex;
  flex: 1;
  height: 100%;
  overflow: hidden;
}

.left {
  width: 200px;
  height: 100%;
  background: green;
}

.right {
  width: 200px;
  height: 100%;
  background: red;
  overflow: auto;
}
#header {
  height: 25px;
}

<div class="main">
<div id="header">Header</div>
<div class="container">
  <div class="left"></div>
  <div class="right">
    <div style="height: 4000px;"></div>
  </div>
</div>
</div>

Behaviour of overflow: auto depends on the browser:
https://developer.mozilla.org/de/docs/Web/CSS/overflow

edited Sep 8, 2020 at 15:48

answered Sep 8, 2020 at 15:22

Chaz

7221 gold badge5 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Alex Over a year ago

Running your example have exactly same problem. I see two scrollbars, I want only one on the second red container, there should not be scrollbar on the body

Chaz Over a year ago

Actually I just noticed that your code is working on my browser already, what browser are you testing with. Your code (and mine) works fine for me (1 Scroll bar on the red div) in chrome and safari on macos. Or did i misunderstand what you want to achieve?

Alex Over a year ago

I just checked in Chrome/Firefox on Mac neither mine or yours versions work correctly. I see two scrollbars.

Chaz Over a year ago

Edited my answer

Alex Over a year ago

do you have an explanation for overflow: hidden for container class? Seems so random, why there is overflow there?

|

Collectives™ on Stack Overflow

Overflow causes global scrollbar to appear even with parent element `overflow: auto`

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related