Hiding the vertical scrollbar when overflow-x is hidden

Question

In this example, I need to hide content horizontally with overflow-x set to hidden. However, it is also automatically adding the vertical scrollbar when I do this. I have read where setting overflow-x or overflow-y sets the other to auto, thus forcing the scrollbar to show. Is there a way around this?

http://jsfiddle.net/kwnQk/

<div class="div1">
    <div class="div2">
    </div>
    <div class="div3">
    </div>
</div>

div.div1 {
    width: 300px;
    height: 300px;
    background-color: #000;
    overflow-y: visible;
    overflow-x: hidden;
}

div.div2 {
    width: 600px;
    height: 80px;
    background-color: #ebebeb;
    margin-top: 20px;
}

div.div3 {
    width: 90px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    background-color: #900;
}

Because if the content in div3 grows vertically, it has to be shown. I want the Y to just grow without scrollbars. — Johann, Aug 22 '13 at 07:33
what do u wana do..do u want to completely hide the scroll bars? — S.Ali, Aug 22 '13 at 07:33
I want content in div2 hidden horizontally but content in div3 to grow vertically without any scrollbars. So yes, no scrollbars should be shown at all. — Johann, Aug 22 '13 at 07:35

score 0 · Answer 1 · answered Aug 22 '13 at 07:41

0

Remove height on div.div1 so div can grow in height.

answered Aug 22 '13 at 07:41

Vladislav Stanic

795
8
13

score 0 · Answer 2 · answered Aug 22 '13 at 07:44

If I understand correctly: you want hide everything overflowing horizontal. But you want .div1 to stretch vertically when more content is added?

If so, change the CSS to:

div.div1 {
    width: 300px;
    min-height: 300px;
    background-color: #000;
    overflow-x: hidden;
}

Check demo.

Or, if you want to keep .div1 with a fixed height, change overflow-y to auto. Check with small content and with long content.

score 0 · Answer 3 · answered Aug 22 '13 at 07:46

0

You could remove x & y scrollbar with :

div.div1 {
    width: 300px;
    height: 300px;
    background-color: #000;
    overflow: hidden;
}

answered Aug 22 '13 at 07:46

Maxime

570
3
18

score -1 · Answer 4 · answered Aug 22 '13 at 07:32

-1

Give width :100% to show the full content horizontally

 div.div1 {
        width: 100%;
        height: 300px;
        background-color: #000;
        overflow-y: visible;
        overflow-x: hidden;
    }

answered Aug 22 '13 at 07:32

aizaz

3,056
9
25
57

No, div1 must be limited in width. – Johann Aug 22 '13 at 07:33

score -1 · Answer 5 · answered Aug 22 '13 at 07:45

-1

I think it will be fix the problem :

div.div1 {
    width: 300px;
    height: 300px;
    background-color: #000;
    display: block;
    overflow: hidden;
}

answered Aug 22 '13 at 07:45

Ema.H

2,862
3
28
41

Hiding the vertical scrollbar when overflow-x is hidden

5 Answers5