Как можно реализовать что то вроде селекта внутри родителя у которого есть скрытые элементы и должна быть горизонтальная прокрутка?

Question

[peppermint_patty]

Подскажите пожалуйста как можно реализовать что то вроде селекта внутри родителя у которого есть скрытые элементы и должна быть горизонтальная прокрутка. Сейчас я сделал это с overflow auto и выпадающий список не видно. Сылка на codepen - https://codepen.io/Valery-Serebryakov/pen/pvyYoEm

Comments

[Александр Васильев]

Это меню (навигация)?
Табы?
Аккордеон?

[N]

Добавь кнопку "ещё" с подменю и туда всё что "не влазиет" скрывай...стильно-модно-молодёжно...

[peppermint_patty]

Александр Васильев, это должны быть спойлеры как на фото.

[Ankhena]

Вариант: показывать в специально заготовленном блоке, находящемся не внутри overflow.
Другой вариант: пойти к дизайнеру.

[peppermint_patty]

Ankhena, что имеется в виду в первом варианте?

[Ankhena]

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

[Сергей delphinpro]

peppermint_patty, имеется ввиду по клику генерировать блок с выпадающим меню и размещать его непосредственным потомком body. Блок абсолютно позиционированный. Нужно вычислять координаты нажатой кнопки и располагать блок в нужном месте. Не забывать отслеживать размеры окна и смещение кнопок (если их можно двигать вправо-влево) чтобы корректировать положение блока.
В принципе некоторые библиотеки для дропдаунов работают по такому принципу. Можно поискать готовые варики.

[MoniKossa]

.block__item.active {
  anchor-name: --block;
  
  .block__text {
    position-anchor: --block;
    position: fixed;
    top: anchor(bottom);
    left: anchor(left);
  }
}