CODEWITHSUNDEEP
css
anon
anon

Reputation: 560

Elements cutting out of scrollbar

Here's an example of what is happening: https://jsfiddle.net/fz5asxn6/

If you hit 'Click Me' and the Add button a few times you can see items added but the bottom ones are being cutoff and I can't see the bottom of the scrollbar.

I've tried setting the overflow property, flex-flow, and table.

Is there any way to see have the options-body take up the whole options inside the sidebar without cutting anything off?

Upvotes: 0

Views: 127

Answers (2)

Nabeel Khan
Nabeel Khan

Reputation: 3993

You only need to add box-sizing: border-box; to your .sidebar

This will tell the browser to calculate the total height from the border, not the content, and thus the 100% height would include the padding.

So your css for .sidebar would become:

.sidebar {
  height: 100%;
  width: 250px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 60px;
  transition: 0.5s;
  box-sizing: border-box;
}

Updated Jsfiddle: https://jsfiddle.net/nabtron/Lznrfcyv/1/

I hope it helps.

Upvotes: 1

bechtold
bechtold

Reputation: 496

Whoa, that confused me. I saw your bug and when I opened the dev tools it was gone. It took me a while to realize your media query was changing things based on the height. But that showed me the bug immediately.

Your sidebar has a height: 100%; and a margin-top: 60px;. Try setting margin-top:0; then you see that this causes the issue.

I suggest setting height: calc(100% - 60px);

And in your media query height: calc(100% - 15px);

That should fix your problem.

Upvotes: 1

Related Questions