How to hide scollbar when not overflowed yet

Question

how can I hide the scroll bar if content height of the div doesn't reach its maximum height like for the example below: 400px and then shows up when the contents reaches or exceeds the height. Thanks!

So far, what I've done is here:

 <div class = "divmenu" style = "height: 400px;overflow-y: scroll;overflow-x:hidden">
     <div class = "col-lg-12">
       Content1 <br>
       Content2 <br>
       Content3 <br>
     </div>
 </div>

Use `overflow:auto` over the element.`overflow-x will only disable horizontal` — Sachin Kanungo, Sep 17 '15 at 06:41
The problem is OP has used overflow-x hidden by default in his post. — Sachin Kanungo, Sep 17 '15 at 06:44
There are some bugs with different overflows: http://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue — Justinas, Sep 17 '15 at 06:45

score 1 · Answer 1 · answered Sep 17 '15 at 06:45

Simply change it to overflow: auto - like this:

<div class = "divmenu" style = "height: 400px; overflow: auto;overflow-x:hidden">
     <div class = "col-lg-12">
       Content1 <br>
       Content2 <br>
       Content3 <br>
     </div>
 </div>

overflow-x: hidden can stay if you need it to

How to hide scollbar when not overflowed yet

1 Answers1