Как включить прокрутку только в одном направлении в CSS?

Question

У меня есть список с некоторыми элементами изменения размера. Когда элементы изменяются, они должны переполнять контейнер в направлении x. Нельзя прокручивать в направлении x. Прокрутка должна быть включена в направлении y.

Я попытался настройки:

overflow-x: visible; 
overflow-y: scroll; 

Но это, кажется, включить прокрутку в обоих направлениях.

Как предотвратить это?

https://jsfiddle.net/64tw8rqe/

---

Ответы на CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue объяснить основную проблему, но не обходным в случае scroll.

---

Это поведение в соответствии с the spec. Я ищу работу.

Answer 1

Проблема заключается в том, что overflow-x: visible; overflow-y: scroll является невозможным сочетание в CSS. Всякий раз, когда visible сопряжен с scroll, он преобразуется в auto. Другими словами, это эквивалентно:

overflow-x: visible; 
overflow-y: scroll; 

overflow-x: auto; 
overflow-y: scroll; 

Это был плохой descision для спецификации, но есть обходные.

Изготовление расширительных элементов position: absolute, их размер не изменит контейнер, и они не будут обрезаны overflow: hidden. Чтобы правильно их расположить, дополнительный div с position: relative обернут вокруг всего контейнера.

HTML:

<div class='container1'> 
    <div class='container2'> 
    <ul class='messages'> 
     <li><pre>Hello</pre></li> 
     <li> 
     <pre>This is a 
     really really really 
     really really long message.</pre> 
     </li> 
     <li><pre>World</pre></li> 
    </ul> 
    </div> 
</div> 

CSS:

* { 
    margin: 0; 
    padding: 0; 
} 

.container1 { 
    position: relative; 
    width: 200px; 
} 

.container2 { 
    background: #f0f; 
    width: 100%; 
    height: 100%; 
    overflow: scroll; 
} 

.messages { 
    overflow: visible; 
    list-style: none; 
} 

.messages li { 
    background: #ff0; 
    width: 100%; 
    height: 24px; 
    margin-top: 12px; 
} 

.messages li pre { 
    position: absolute; 
    display: inline-block; 
    box-sizing: border-box; 
    width: 100%; 
    max-height: 24px; 
    padding: 4px; 
    background: #0ff; 
    border-radius: 4px; 
    line-height: 16px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    width: auto; 
    min-width: 100%; 
    max-width: 100%; 
    transition: max-width 200ms ease-out, height 200ms ease-out; 
} 

.messages li pre:hover { 
    z-index: 1; 
    background: #00f; 
    max-width: 80vw; 
    max-height: 80vh; 
    transition: max-width 200ms ease-in, max-height 200ms ease-in; 
} 

Fiddle:

https://jsfiddle.net/cyL6tc2k/2/

Кредит на хитрость здесь: http://front-back.com/how-to-make-absolute-positioned-elements-overlap-their-overflow-hidden-parent

Answer 2

Попробуйте изменить переполнение-у: скрытый

Answer 3

Это связано с вашим использованием «предварительно», который имеет некоторые значения по умолчанию в некоторых браузерах:

pre { 
     display: block; 
     font-family: monospace; 
     white-space: pre; 
     margin: 1em 0; 
    } 

У вас есть два варианта: изменить все «до» на «р» (п) или переписать Пробельное свойство предварительно, добавив следующее:

pre { white-space: normal; } 

Answer 4

Если у вас есть вертикальная переполнение, полосы прокрутка добавляются к горизонтальному потоку (справа) , Элементы не будут перекрывать эту полосу прокрутки, чтобы браузеры меняли настройки переполнения, чтобы прокручивать их горизонтально.

Что вам нужно сделать, это добавить еще один контейнер вокруг все содержимое и установить его, чтобы иметь большую ширину, что все переполненном содержимое внутри, но высота внутреннего элемента и вертикальной прокрутки:

HTML

<div class='container3'><!-- Add a parent container --> 
    <div class='container'> 
    ... 
    </div> 
</div> 

CSS

/* A parent container */ 
.container3 { 
    /* The maximum height of your inner content before scrolling is enabled */ 
    height: 200px; 

    /* Enable the vertical scroll if we have enough content */ 
    overflow-y: auto; 
} 

FIDDLE

https://jsfiddle.net/cL8hr7ot/