overflow-y:scroll is not working for chrome

Question

I am not getting a scroll-bar for box in chrome but getting 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 JSFiddle link http://jsfiddle.net/wydsf2vk/

Answer 1

将height属性添加到css类，以显示需要设置div的修复高度的滚动条。

Answer 2

Are you by chance using a track pad instead of a mouse, on OSX? There's some quirk where the scrollbar will be hidden if you're using a track pad. Plug in a mouse and see if it appears.

Answer 3

I just checked your fiddle, that's happening because you've not added the overflow-y: scroll; property to the fiddle. It does work 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

设置该.box的最大高度它将起作用

Answer 6

You are missing the height CSS property. check snippet 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>