Overflow-y: scrolling does not work for chrome

Question

I do not get the scroll bar for the window in chrome, but I get in fire fox and internet explorer

li.box{ border-radius: 0px; padding:0; border: solid 1px #8c8d8e; overflow: hidden; overflow-y:scroll; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: #ffffff; opacity: 0.85; } 

this is the JSFiddle link http://jsfiddle.net/wydsf2vk/

Answer 1

Add a height property to your css class to display the scroll bar needed to set the correction height of your div.

Answer 2

Do you accidentally use a track instead of a mouse on OSX? There's some kind of quirk where the scrollbar will be hidden if you use the track. Plug in the mouse and see if it appears.

Answer 3

I just checked your fiddle, what happens because you did not add the overflow-y: scroll; property overflow-y: scroll; to the violin. It works for my version (Chrome too).

http://jsfiddle.net/y8jqsya4/

Answer 4

change your css: -

 height:100px border-radius: 0px; padding:0; border: solid 1px #8c8d8e; overflow: hidden; overflow-y:scroll; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: #ffffff; opacity: 0.85; 

http://jsfiddle.net/wydsf2vk/2/

Answer 5

Set max-height for this .box, it will work

Answer 6

You are missing the CSS height . Check out the picture below.

 .box { border-radius: 0px; padding:0; border: solid 1px #8c8d8e; overflow: hidden; overflow-y:scroll; height: 100px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: #ffffff; opacity: 0.85; } 

 <div class="box"> <p> Hello World 1 </p> <p> Hello World 2 </p> <p> Hello World 3 </p> <p> Hello World 4 </p> <p> Hello World 5 </p> </div>