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

Если нужно сделать что-то похожее на select внутри родителя со скрытыми элементами и горизонтальной прокруткой, лучше не пытаться использовать нативный <select>. Нативный select плохо контролируется по стилям, а выпадающий список часто выходит за контейнер непредсказуемо. Делайте кастомный компонент: кнопка выбора, список опций и отдельная логика прокрутки.

Главная проблема в вашем описании — сочетание overflow: hidden у родителя и выпадающего списка. Если dropdown находится внутри такого контейнера, он будет обрезаться. Есть два рабочих пути: либо выводить список внутри контейнера и жить с обрезкой/скроллом, либо выносить dropdown в отдельный слой поверх страницы через portal/absolute/fixed.

Пример CSS для горизонтальных опций:

.tabs-select {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  max-width: 100%;
  scroll-snap-type: x proximity;
}
.tabs-select button {
  flex: 0 0 auto;
  white-space: nowrap;
  scroll-snap-align: start;
}

Если нужен именно dropdown, список лучше позиционировать относительно viewport, а координаты кнопки брать через getBoundingClientRect(). Тогда родительский overflow не отрежет меню. В React для этого обычно используют portal, в обычном JS — добавляют меню в конец body.

Также продумайте клавиатуру и мобильные устройства: Enter/Space открывают список, Escape закрывает, стрелки переключают, клик вне закрывает. На телефоне маленькие скрытые элементы и горизонтальный скролл часто неудобны, поэтому иногда лучше заменить dropdown на bottom sheet или обычный список кнопок.

Итог: для скрытых элементов и горизонтальной прокрутки делайте кастомный UI. Если список должен выходить за пределы родителя, выносите его из контейнера с overflow: hidden. Если всё должно оставаться внутри — используйте горизонтальный scroll-list, а не выпадающее меню.