CODEWITHSUNDEEP
cssoverflow
Brett
Brett

Reputation: 20049

Why am I getting scroll bars in this div?

http://jsfiddle.net/BCTF9/

I have set the overflow as I want to restrict the height of the boxes and have a scroll show up when needed; so I added overflow-y: auto; as that generally does the trick. But now I see horizontal scroll bars on the second box in the example as well, though I'm not sure why?

I tried adding overflow-x: visible; but it didn't work. I don't want to set any widths on these boxes as they just need to be the width of the content + some padding.

You will also see the vertical scroll bars start too soon and don't allow the padding needed.

What can I do here?

Upvotes: 0

Views: 179

Answers (4)

Anup
Anup

Reputation: 9738

Fiddle

.cat_list {
    overflow-y: auto;
    overflow-x: hidden;
    min-width: 200px;
    padding: 10px;
}

Replace it

Upvotes: 0

Kishori
Kishori

Reputation: 1095

The scroll bars are appearing because there are many items in second div. Try to remove these items, and they'll go away.

Upvotes: 0

Surjith S M
Surjith S M

Reputation: 6740

jsfiddle Demo

Two reasons and fixes

The content in the second div taking too much width causing horizontal overflow, so increase the width

Instead of overflow-x:visible try overflow-x:hidden to hide horizontal scrollbar even if the width is higher

Upvotes: 1

vivek salve
vivek salve

Reputation: 991

Try with this

CSS

.cat_list{ height:200px;
         background:#e4e4e4; 
         width:200px; 
         overflow:hidden; 
         overflow-y:scroll; 
         overflow-x:hidden;}

HTML

<div class="cat_list"></div>

Upvotes: 0

Related Questions