Make div scrollable no scrollbar

Question

Once again I have read many posts on this topic but none of the suggested solutions work. I now have my solution, however, do not know why it works and would appreciate some insight.

Below is the solution found all over SO: Hide scroll bar, but while still being able to scroll

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Testing</title>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  </head>
  <body>
    <div class="hidden-xs hidden-sm col-md-3" id="parent">
      <div id="child">
        Test text here
      </div>
    </div>
  </body>
</html>

CSS

#parent {
  padding: 0px;
  border-width: 1px;
  border-style: solid;
  height: calc(100vh);
  overflow: hidden;
}

#child {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
}

The above does not work for me as the scroll bar remains visible. However, I have found a property on the page for the parent element "box-sizing" that when changed to anything other than "border-box" the scrollbar disappears and scrolling works as expected.

According to the browser, this CSS comes from the bootstrap.Sass gem.

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

My two questions are: 1) Why is this the case? 2) How do I turn it off in my CSS file?

score 2 · Accepted Answer · answered Sep 12 '17 at 03:39

A scrollbar is placed on an edge of the element's box, it should be inserted between the inner border edge and the outer padding edge. Any space taken up by the scrollbars should be taken out of (subtracted from the dimensions of) the containing block formed by the element with the scrollbars.

The content-box(default it is) means the element's content box will be the values of it's width property, and the width of any border or padding will be added to the final rendered width.;
The border-box means tells the browser to account for any border and padding in the value you specify for width and height.

You can add this code:

#child {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Nice answer, it should have an `!important` just to assure it does not get overwritten and i think he/she wants it to be `content-box` instead of `border-box`. — MarioE, Sep 12 '17 at 03:43

score 0 · Answer 2 · answered Sep 12 '17 at 06:30

Are you looking for something like this?

.mask{
                width: 300px;
                height: 400px;
                background: #ddd;
                overflow: hidden;
            }
            .scroll{
                font-size: 17px;
                width: 318px;
                padding-right: 18px;
                height: 400px;
                overflow-y: scroll;
                overflow-x: hidde;
            }

<div class="mask">
            <div class="scroll">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                Donec pellentesque condimentum condimentum. Ut ut nulla vitae 
                turpis tempor lacinia a non ipsum. Nam velit lacus, interdum q
                uis scelerisque eget, scelerisque ac ipsum. Curabitur sed interdum 
                lectus. Cras ac mattis libero, in ultricies lectus. Nulla sodales a 
                felis nec faucibus. Vivamus finibus eu dui nec blandit. Donec 
                aliquam, orci ac imperdiet hendrerit, lorem est lacinia turpis, 
                et aliquet mi elit id mauris. Cras venenatis aliquet tellus id 
                faucibus. Vestibulum enim tellus, sollicitudin eget libero et, 
                condimentum auctor quam. Nullam fermentum felis at ligula rutrum, 
                at iaculis neque suscipit. Vivamus sagittis ornare nisl id 
                elementum. Quisque sit amet libero non ex convallis volutpat. 
                Nulla lacinia eros eget metus accumsan, id mattis ante tempus. 
                Proin vulputate ante sed efficitur condimentum. Etiam pharetra 
                justo dolor, ac fermentum arcu iaculis vel.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                Donec pellentesque condimentum condimentum. Ut ut nulla vitae 
                turpis tempor lacinia a non ipsum. Nam velit lacus, interdum q
                uis scelerisque eget, scelerisque ac ipsum. Curabitur sed interdum 
                lectus. Cras ac mattis libero, in ultricies lectus. Nulla sodales a 
                felis nec faucibus. Vivamus finibus eu dui nec blandit. Donec 
                aliquam, orci ac imperdiet hendrerit, lorem est lacinia turpis, 
                et aliquet mi elit id mauris. Cras venenatis aliquet tellus id 
                faucibus. Vestibulum enim tellus, sollicitudin eget libero et, 
                condimentum auctor quam. Nullam fermentum felis at ligula rutrum, 
                at iaculis neque suscipit. Vivamus sagittis ornare nisl id 
                elementum. Quisque sit amet libero non ex convallis volutpat. 
                Nulla lacinia eros eget metus accumsan, id mattis ante tempus. 
                Proin vulputate ante sed efficitur condimentum. Etiam pharetra 
                justo dolor, ac fermentum arcu iaculis vel.
            </div>
        </div>

Yes, however the problem was the box-sizing property. See above. — Dercni, Sep 12 '17 at 06:33

Make div scrollable no scrollbar

2 Answers2