Почему грид контейнер использует неправильную ширину себя при overflow?

Question

[godsplane]

Пример: https://codepen.io/poylar/pen/KKBKaYG
При прокрутки до конца, синий блок так же начинает прокручиваться, хотя у него position:sticky;
Если посмотреть в инспекторе, то видно, что ширин грид контейнера как будто обрывается на значении ширины окна, но при этом все элементы расположены как надо.
Если я добавлю какой-нибудь width:fit-content к контейнеру, то все будет окей, но это не то решение которое я ожидаю.
Без width: fit-content:

С ним:

Comments

[Ankhena]

Блочные элементы по умолчанию занимают доступную ширину родителя.
Поэтому .grid закончился там, где закончился родитель.
То что в него не поместилось - выпало.

Если я добавлю какой-нибудь width:fit-content к контейнеру, то все будет окей

Прекрасное решение.
Чем оно вас не устраивает?

[godsplane]

Ankhena, оно как-то ломает все в моем кейсе и мне приходится юзать медиазапрос чтобы внедрить width;fit-content только когда есть прокрутка, а я бы хотел этого избежать.
Ну и так же я хотел бы узнать другие варианты.

[Ankhena]

godsplane, overflow auto для grid

[godsplane]

Ankhena, как вариант да, но если строк несколько то они будут независимо друг от друга скролится. а нужно чтобы одновременно

[Ankhena]

godsplane, а если попробовать все фантазии указывать в вопросе?