0

I am using padding to hide scrollbars but if you scroll to the bottom, you will see that there is additional space. So what is the problem with the CSS ?

.outer {
  width: 300px;
  height: 300px;
  border: 1px solid red;
  overflow: hidden;
}

.inner {
  width: 100%;
  height: 100%;
  overflow: scroll;
  padding: 0 80px 80px 0;
  box-sizing: content-box;
}

.content {
  width: 500px;
  height: 800px;
  background-color: yellow;
  border: 1px solid green;
}
<div class='outer'>
  <div class='inner'>
    <div class='content'></div>
  </div>
</div>
samadadi
  • 3,100
  • 7
  • 25
  • 37
  • You can use `your_element::-webkit-scrollbar {display:none}` to hide the scrollbar in webkit browsers. For firefox, check this: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars – Ar Rakin Jul 18 '21 at 16:48
  • I am aware of your solution, but I want to know why this is happening? Why there is additional space in the bottom of scrollbar container? – samadadi Jul 18 '21 at 16:51
  • I guess, you have set a large number in the `height` property, so the problem is happending. – Ar Rakin Jul 18 '21 at 16:53

0 Answers0