overflow-y: visible не работает если overflow-x: hidden

[ows.nightwolf]

Всем доброго времени суток

У меня возникла проблема с overflow. Вот упрощенный пример, для того чтоб "потрогать" проблему. В этом примере есть контейнер, и в нем абсолютно позиционированный элемент. Контейнеру заданы свойства overflow-x: hidden и overflow-y: visible для того чтобы все что вылазит за пределы контейнера по оси X скрывалось, а все что вылазит по оси Y - показывалось, при этом скролл на компоненте отображаться не должен. Но эта связка не работает (как видно на примере - у контейнера появляется скролл бар), однако если у контейнера изменить overflow-x c hidden на visible все работает как надо - скролл бар пропадает и абсолютно позиционированный элемент становится полностью видим, вылазя за пределы контейнера.

Вопрос: почему браузеру есть разница установлен ли overflow-x в visible если контент внутри карусели выходит за пределы карусели по оси Y, а не X, и как решить эту проблему?

Edited October 11, 2017 by ows.nightwolf

[ows.nightwolf]

Спасибо всем за помощь, что в итоге:

В 11.10.2017 в 19:12, npofopr сказал:

Без js вам не сделать. 
Были конечно всякого рода хаки, но проще и лучше с js. 
Погуглите на тему "элемент за пределами overflow", старая это тема. 

Даже здесь на форуме вопросы по ней были.

Исходя из спеки: если у элемента одно из свойств overflow-x или overflow-y установлено в visible, а второе из этих свойств в любое значение отличное от visible, то для второго значение автоматически считается установленным в "auto". Т.е. как ни пытайся, а заставить выходящих за пределы родителя по одной оси детей обрезаться, а по другой оси показываться - ничего не получится, будет либо автоматически скролл у родителя добавляться, либо нужно создавать создавать два вложенных враппера, у одного из которых будет overflow-x: hidden, например, а второму выставлять фиксированную высоту.

Т.к. ни один из этих вариантов мне не подходит, пришлось идти другим путем и менять принцип действия моего компонента, чтобы избавится от надобности применять к нему overflow: hidden.

Edited October 13, 2017 by ows.nightwolf
Уточнение ответа

[npofopr]

Что то я ничего не понял. Вроде всё работает так, как и должно. Одинаково что там, что тут. 

+ вы position:relative хоть чему то укажите, а то ваш absolute как вы болтается не знамо где ему быть. Как укажите, там всё и обрезаться начнёт)

[ows.nightwolf]

1 час назад, npofopr сказал:

Что то я ничего не понял. Вроде всё работает так, как и должно. Одинаково что там, что тут. 

+ вы position:relative хоть чему то укажите, а то ваш absolute как вы болтается не знамо где ему быть. Как укажите, там всё и обрезаться начнёт)

Спасибо   Да, действительно, я упустил position: relative, и после ее добавления оба примера начинают выглядеть одинаково изначально (обрезаются).

Но основная проблема осталась - нужно чтобы все что выходит за пределы элемента по оси X обрезалось, а все что выходит за пределы по оси Y - отображалось.

Я обновил описание проблемы и тему беседы, может так меньше будет взрывать мозг  

Edited October 11, 2017 by ows.nightwolf

[AlexZaw]

<div class="carousel">
  <div class="carousel-page-wrapper" style="transform: translateX(0);">
    absolute element here displays not as expected (scrollbar in container appears)
    <div class="absolute-element"></div>
  </div>
</div>

.carousel {
  position: relative;
  padding: 1em;
  border: solid 1px blue;
  overflow: hidden;
  height: 30px;
}

.carousel-page-wrapper{
overflow:auto;
  width: 100%;
  height: 100%;
  padding: 0 35px 0 0;
}
.absolute-element {
  position: absolute;
  width: 200px;
  height: 200px;
  border: solid 3px darkred;
  background-color: red;
}

Песочница

[ows.nightwolf]

50 минут назад, AlexZaw сказал:

<div class="carousel">
  <div class="carousel-page-wrapper" style="transform: translateX(0);">
    absolute element here displays not as expected (scrollbar in container appears)
    <div class="absolute-element"></div>
  </div>
</div>

.carousel {
  position: relative;
  padding: 1em;
  border: solid 1px blue;
  overflow: hidden;
  height: 30px;
}

.carousel-page-wrapper{
overflow:auto;
  width: 100%;
  height: 100%;
  padding: 0 35px 0 0;
}
.absolute-element {
  position: absolute;
  width: 200px;
  height: 200px;
  border: solid 3px darkred;
  background-color: red;
}

Песочница

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

[AlexZaw]

тогда вот:

/* хром, сафари */
.element::-webkit-scrollbar { width: 0; }

/* ie 10+ */
.element { -ms-overflow-style: none; }

/* фф (свойство больше не работает, других способов тоже нет)*/
.element { overflow: -moz-scrollbars-none; }

только вроде некорректно работает в мобильных браузерах.

либо с помощью JS, вот статейка: https://habrahabr.ru/company/2gis/blog/169359/

[ows.nightwolf]

56 минут назад, AlexZaw сказал:

тогда вот:

/* хром, сафари */
.element::-webkit-scrollbar { width: 0; }

/* ie 10+ */
.element { -ms-overflow-style: none; }

/* фф (свойство больше не работает, других способов тоже нет)*/
.element { overflow: -moz-scrollbars-none; }

только вроде некорректно работает в мобильных браузерах.

либо с помощью JS, вот статейка: https://habrahabr.ru/company/2gis/blog/169359/

Насколько я вижу это все просто заставляет скроллбар не отображаться, но не оказывает влияния на то как элемент ведет себя.

Мне же нужно чтобы все выглядело так, как выглядит когда элементу .carousel задаешь overflow: visible, но в этом случае есть один момент - контент будет вылазить за пределы карусели и по оси X (по горизонтали), а мне это не нужно.

Edited October 11, 2017 by ows.nightwolf

[npofopr]

Вы чего добиться то в итоге хотите? Карусель сделать? 
Самый лучший вариант, посмотреть как сделано в готовых каруселях. 

[AlexZaw]

Совсем запутался. Должно работать так как в примере, но только без скроллбара, или еще как-то?

[ows.nightwolf]

1 час назад, npofopr сказал:

Вы чего добиться то в итоге хотите? Карусель сделать? 
Самый лучший вариант, посмотреть как сделано в готовых каруселях. 

Хочу добиться того чтобы контейнер выпадающего списка (коим в реальном проекте и является абсолютно позиционированный красный элемент) визуально отображался поверх объекта .carousel, а не внутри него.

Это можно было бы сделать если поместить абсолютно позиционированный элемент за пределы карусели, дать ему position: fixed или absolute и потом js ом задать нужные координаты, но у меня нет возможности так сделать т.к. этот элемент создается плагином (jquery-nice-select).

 

49 минут назад, AlexZaw сказал:

Совсем запутался. Должно работать так как в примере, но только без скроллбара, или еще как-то?

Должно работать точно так же как если в примере раскомментить строку в css файле которую я закомментил, и там еще подписал что если ее раскомментить то все будет работать как надо (If you uncomment this property - scrollbar disappears), с одним отличием - по оси X контент не должен выходить за пределы контейнера (в примере этого не видно, но т.к. overflow-x: visible - контент будет видим по оси X)

Edited October 11, 2017 by ows.nightwolf

[npofopr]

Без js вам не сделать. 
Были конечно всякого рода хаки, но проще и лучше с js. 
Погуглите на тему "элемент за пределами overflow", старая это тема. 

Даже здесь на форуме вопросы по ней были.

[Switch74]

Возможно можно взять за основу это https://jsfiddle.net/4uus7Lh0/2/
на 5 слайде сделал absolute выпадающее меню за пределы slider

[ows.nightwolf]

14 часа назад, npofopr сказал:

Без js вам не сделать. 
Были конечно всякого рода хаки, но проще и лучше с js. 
Погуглите на тему "элемент за пределами overflow", старая это тема. 

Даже здесь на форуме вопросы по ней были.

Да, спасибо большое, действительно нашел по этой теме и на stackowerflow и на нашем форуме ответы. Например, в этой теме содержится нужная информация https://htmlforum.io/topic/55822-overflow-ogranichivaet-absolyutnyiy-blok/ 

1 час назад, Switch74 сказал:

Возможно можно взять за основу это https://jsfiddle.net/4uus7Lh0/2/
на 5 слайде сделал absolute выпадающее меню за пределы slider

Благодарю, этот вариант подойдет если заранее известны высота и/или ширина контейнера, у меня же они динамические.

[Switch74]

этот вариант может и не подойдет, но ЗА ОСНОВУ это можно взять https://jsfiddle.net/4uus7Lh0/3/