how to use css to recover overflow scroll behavior

Question

I was wondering what I would need to do with the div#blocker in this code to recover the ability to have overflow in "innermost" be handled with scrolling: https://jsfiddle.net/39q78tdm/ .

* {
  box-sizing: border-box;
}

main {
  background: pink;
  height: 400px;
  border: solid;
  overflow: hidden;
}

container {
  background: yellow;
}

#wrapper {
  height: 100%;
  overflow: scroll;
}

#inner {
  background: aqua;
  height: 800px;
}

<main>
  <div id="blocker">
    <container>
      <header>header in container</header>
      <div id="wrapper">
        <div id="inner">
          innermost
        </div>
      </div>
    </container>
  </div>
</main>

please be clear what you want. you want to add the scroll bar only if the content is overflowing? — Xenio Gracias
– Xenio Gracias, Commented Mar 7, 2019 at 5:24

josephting · Accepted Answer · 2019-03-07 05:30:40Z

Your #blocker is causing the whole element's height from being expanded. As a result, the whole container is being displayed in full height (824px) as well.

This can be fixed by setting #blocker to have the same height as main.

The other change that I've made is not really necessary in this context but by doing calc(100% - headerHeight), I can make sure that the whole content in #inner can be shown. If you do not do this, the most bottom part of the content may be cut off as they are outside the black border being hidden by main's overflow: hidden.

* {
  box-sizing: border-box;
}
main {
  background: pink;
  height: 400px;
  border: solid;
  overflow: hidden;
}
#blocker {
  height: 400px;
}
container {
  background: yellow;
}
#wrapper {
  height: calc(100% - 24px);
  overflow: scroll;
}
#inner {
  background: aqua;
  height: 800px;
}

<main>
  <div id="blocker">
    <container>
      <header>header in container</header>
      <div id="wrapper">
        <div id="inner">
          innermost
        </div>
      </div>
    </container>
  </div>
</main>

Debasish · Accepted Answer · 2019-03-07 05:28:06Z

2

Use height in #wrapper id like below

#wrapper {
 overflow: scroll;
 height: 100px;
}

answered Mar 7, 2019 at 5:28

Debasish

3227 silver badges23 bronze badges

Collectives™ on Stack Overflow

how to use css to recover overflow scroll behavior

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related