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

Question

[celtrix]

Привет! Помогите решить проблему.
При горизонтальном скроллинге дочерних элементов пропадает фон. Item не растягивается на все ширину блока.
Также кнопка btn должны быть всегда прижата к правой границе видимой части меню.

https://jsfiddle.net/celtrix/0tfL8r7u/7/

Answer 1

[xversus]

position: relative перенесите в .MenuMainItemGroup, background-color туда же, раз у вас все равно фон везде одинаковый.
Но вообще не делайте так, если не хотите все время натыкаться на какие-то трудности. Для верстки таблиц используют table.

Comments

[celtrix]

с положением кнопок вопрос решен! СПасибо.
По поводу фона, тут дело не совсем в этом. Фон по факту мне не нужен. Сдесь есть hover эфффект по строкам. И он обрывается при скороле, т.к. дочерние айтемы не растягиваются при увеличении содержимого.

[xversus]

celtrix, можете воспользоваться таким хаком: меняете в .MenuMainItemGroup .MenuMainItemGroup__item min-height: 100% на width: 100vw.
Тогда строки будут растягиваться не на ширину контейнера, а на ширину экрана.