Кастомные селекты, баг с выпадающим списком за html, body, вьюпорт. Объясните пожалуйста, как это происходит?

Question

[Саша]

В кастомном селекте (практически любой jQuery плагин) выпадающий список вешается на абсолюте, как он может участвовать в формировании высоты html страницы?
Допустим, высота html страницы 400px, скролл отсутствует, а выпадающий список имеет высоту за 400 и при его активации появляется скролл страницы.
Объясните пожалуйста, как так получается?
Пример

Answer 1

[Дмитрий Филимонов]

Это нормальное поведение.

jsfiddle.net/1vrm94a2 - absolute, скролл есть.
jsfiddle.net/ys6ry7L8 - fixed, скролла нет.

То, что элемент, позиционированный как absolute, вне основного потока элементов (или как это по-русски правильнее?), не говорит о том, что родительный контейнер должен не показывать скролл, если дочерние элементы в него не влязят. Вы можете сделать это с помощью overflow, если нужно.

jsfiddle.net/j2nh9bb7 - overflow: visible;
jsfiddle.net/y2u84t8L - overflow: scroll;
jsfiddle.net/tzubgmwp - overflow: hidden;

А вот fixed-позиционирование не влияет на скролл/overflow никак (jsfiddle.net/kbox2nzg), да, т.к. такое поведение в него изначально было заложено - привязываться к определенной точке вьюпорта и не влиять на скролл/overflow.

Более того, влияние absolute-позиционирования на скролл - это правильно. Что будет, если ваша менюшка не влезет?

Comments

[Саша]

Спасибо, расписали все.
Просто странно, что элемент который позиционируется как абсолют влияет на высоту родителя.

[Евгений Петров]

userAlexander: Не родителя, а ближайшего внешнего контекста с overflow.

[Саша]

Евгений Петров: Даже если на блоке не указан relative но есть overflow который не указан явно?

[Евгений Петров]

userAlexander: Контекст — это не блок с overflow. Правило overflow не формирует контекст, а лишь говорит, как поступать с потомками. Тема не совсем простая и зависит от многих вещей (normal flow, positioning, floating etc.), включая тип элемента (block, inline, generated content etc.).

Если блок не формирует контекст, а его потомок формирует и выходит за пределы content-box предка, то какой overflow не ставь такому предку, потомок, формирующий контекст, вылезет из него.

[Евгений Петров]

userAlexander: Вот тут та же тема Как скруглить углы у картинки, когда используется эффект увеличения при наведении?
И вообще — тема контекстов часто неявно присутствует во многих вопросах.

[Дмитрий Филимонов]

userAlexander то, о чем говорит Евгений, описано тут: www.w3.org/TR/CSS21/visuren.html

Он говорит про контексты "отображения"/форматирования. Тема действительно большая, но если очень коротко: все в CSS есть коробки-прямоугольники (box). Они бывают разных типов (display за это отвечает). В зависимости от типа они образуют инлайновый или блочный контекст отображения/форматирования. По умолчанию, если нет флоатов, абсолютного позиционирования, table-cell и т.п. - это "стандартный поток". Можно представить это как колонку в газете, где блоки друг за другом вертикально. Если же мы создаем новый блочный контекст (а это абслюты, флоаты и т.п.), то у нас другие элементы остаются в "стандартном потоке", а текущий элемент создает новый контекст форматирования (для контента внутри этих блоков). Бывают блоки (containing blocks), относительно которых рассчитываются позиции дочерних блоков. Например, поэтому часто можно увидеть, что у родителя стоит position: relative, чтобы запозиционировать position: absolute; относительно него, потому что это способ задать containing block (www.w3.org/TR/CSS21/visudet.html#containing-block-...). Инлайновые контексты - это такие, где элементы распространяются горизонтально. Но и там есть свои нюансы: например, если применить float к инлайновому элементу (а он был в инлайновом контексте), то он станет блочным (применится width к нему), при этом он будет находиться в новом контексте форматирования, а не в normal flow (jsfiddle.net/q4nLqx0b).

Так вот, если position: relative; - это определяет containing block, то overflow отвечает за отображения контента блока (www.w3.org/TR/CSS21/visufx.html#overflow). Контент - это любые элементы.

Причем overflow-таки формирует контекст, если он отличен от visible, здесь Евгений ошибается Евгений Петров ). Об этом говорит вот этот пример (и также слова в стандарте по ссылке выше): jsfiddle.net/96t6x5n0 Либо я что-то не так понял.

Конечно, это не вся инфа, тема тянет на отдельную статью. Например, Евгений написал про "generated content", один из примеров приведен тут (www.w3.org/TR/CSS21/visuren.html#box-gen): к инлайновому элементу в потоке вместе с блочными лучше относиться тоже как к блочному (в вопросе отображения относительно них), т.к. он, по сути, будет являться анонимным блочным элементом. Но на практике все очень и очень просто, достаточно рассуждать "газетными коробочками" и прочувствовать поведение коробочной модели CSS.

[Евгений Петров]

Дмитрий Филимонов: Overflow не формирует контекст. Для понимания
jsfiddle.net/petroveg/yk66o84d/1 — контекст сформирован в блоке с прокруткой
jsfiddle.net/petroveg/yk66o84d/2 — контекст отсутствует

[Евгений Петров]

Дмитрий Филимонов: Вы, наверное, имеете ввиду formatting context. Но это не имеет отношения к нашему вопросу.

[Дмитрий Филимонов]

Евгений Петров: Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

www.w3.org/TR/CSS21/visuren.html#block-formatting

Именно про него и говорю. Создается новый formatting context. Без position: relative; у родителя позиция высчитывается относительно root element (в вашем примере). В CSS3 formatting context назвали flow root, что логичнее. И overflow, отличный от visible, создает flow root. Но если дочерний элемент с position: absolute, а у родительского нет position: relative, то для него flow root будет уже другим. overflow отвечает только за те элементы, которые находятся в его formatting context. position: relative может просто привязать новый formatting context к containing block (www.w3.org/TR/CSS21/visudet.html#containing-block-...), а поэтому начинает работать overflow.

Создание контекста по вертикали (stacking context) здесь ни при чем. Просто этот контекст также создается при position: relative и все дочерние элементы попадают в него, но это ось Z, а я говорю про Y. И автор говорит про Y.

Я, конечно, читаю спецификацию CSS21, но посмотрел по ссылке box model css3 - вроде бы расхождений не вижу.

[Дмитрий Филимонов]

То есть я к тому, что position: relative; как создает stacking context (который влияет на Z), так и привязывает дочерний позиционированный элемент к себе (то есть определяет containing block). Но без overflow, отличном от visible, это ничего не дает, так как absolute-позицинирование будет находиться в своем formatting context.

[Дмитрий Филимонов]

Евгений Петров: Посмотрел также пример по ссылке у вас. jsfiddle.net/e4xo5gy7 - если убрать overflow: hidden, то пропадает новый formatting context, в итоге, несмотря на то, что stacking context новый есть (position: relative и z-index: 1), но все равно размеры родителя ни на что не влияют (потому что контекста по X/Y нет). При этом с таким же успехом будет работать overflow-y: hidden (потому что контекст блочный, как я понимаю).

[Евгений Петров]

Дмитрий Филимонов: Что-то я всех запутал, да и сам запутался:) Нужно ввести современные термины flow root, оставив старинные containing block и stacking context, освежив их некоторыми современными правилами.

Я не совсем понял, что вы хотели сказать насчёт убирания overflow, но в части контекста форматирования правы — именно flow root отвечает за учёт потомков. Только не забывать, что flow root идёт рука об руку с containing block.

Ну а насчёт stacking context — он имеет значение в рассматриваемой ситуации, но может выражаться в возможном нарушении, например, как здесь jsfiddle.net/petroveg/yk66o84d/3
Вроде и flow root есть, и с containing block всё в порядке, но вот stacking context подводит за счёт анимации.

Так что приношу извинения за смешивание в кучу терминов, что не отменяет сложности темы.

[Дмитрий Филимонов]

Евгений Петров: тут да, существуют нюансы. У меня тоже странное ощущение, как-нибудь надо все это переосмыслить.

[Саша]

Дмитрий Филимонов: Евгений Петров: Спасибо за уделенное время и обширные ответы!
Немного стало ясней, нужно осмыслить, попрактиковаться.

[Саша]

Самое забавное, что у body не задан overflow, а прокрутка есть.

Answer 2

[Евгений Петров]

Вам следует почитать про flow root, containing block и stacking context.
Так называемый flow root с overflow, отличным от visible, обязан учитывать все внутренние контексты, для которых предоставляет containing block.
Пример

Comments

[Саша]

Спасибо за совет!

[Дмитрий Филимонов]

Как я понимаю, stacking order - это контекст наложения. То есть это контексты по оси Z, но не X/Y, прямого отношения к вопросу автора они не имеют.

[Евгений Петров]

Дмитрий Филимонов: В вашем ответе привёл 2 примера. И даже ссылку на другую тему, где также проблема отсутствия работы overflow для неожиданного появления внутреннего контекста в результате трансформации (которая неминуемо создаёт контекст).

Answer 3

[Axel186]

Если список вешается на абсолюте, то значит height:100% это высота нашего окна ( не зависит от контента ).
Назначим списку max-height:80% - значит список не займет больше 80% нашего окна!

Пример : https://jsfiddle.net/o6ket12g/1/

Comments

[Евгений Петров]

Высота считается от padding-box контейнера. Поставьте position:relative у body, увидите другой результат.
Вам тоже следовало бы почитать про контексты и позиционирование, в частности. Ну и про viewport, а то уже затаскали слово «окно».

[Саша]

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