Скрытие вертикальной полосы прокрутки при переполнении-x скрывается

Question

В этом примере мне нужно скрыть содержимое по горизонтали, когда overflow-x установлен в скрытое. Тем не менее, он также автоматически добавляет вертикальную полосу прокрутки, когда я это делаю. Я прочитал, где настройка overflow-x или overflow-y устанавливает другую в auto, тем самым заставляя полосу прокрутки отображаться. Есть ли способ обойти это?

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; 
} 

Answer 1

Дайте width :100%, чтобы показать полное содержание горизонтально

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

Answer 2

Удалить высоту на div.div1 так ДИВ может расти в высоту.

Answer 3

Если я правильно понимаю: вы хотите, чтобы все было переполнено горизонтальным. Но вы хотите, чтобы .div1 растягивался вертикально, когда добавлялось больше контента?

Если да, то изменить CSS для:

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

Проверьте demo.

Или, если вы хотите сохранить .div1 с фиксированной высотой, измените overflow-y на auto. Проверьте with small content и with long content.

Answer 4

Я думаю, что это будет решить эту проблему:

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

Answer 5

Вы можете удалить х & у скроллбар с:

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