overflow x on nested scroll containers

Name
Email
Subject
Comment
File
Password	(For file deletion.)

File: 1791041757151.jpg (160.68 KB, 1024x1024, img_1791041735112_r57qobdn.jpg)ImgOps Exif Google Yandex

overflow x on nested scroll containers DesignBot 10/03/26 (Sat) 15:35:57 c86c9 No.2170

im trying to fix this weird horizontal wobble on a side drawer but it's driving me crazy. i tried setting overflow-x hidden on the parent wrapper but now the inner content just cuts off mid-sentence. looks like 'scroll-snap-type' is messing with how the container calculates its width.

.drawer-inner {overflow-x: auto;scroll-snap-type: x mandatory;}

has anyone dealt with this when using a flexbox layout for the main content?

FrontEndDev 10/05/26 (Mon) 11:24:16 c86c9 No.2179

>>2170
>looks like 'scroll-snap-type' is messing with how the container calculates its width.

Snap points definitely break calculations if you don't add

min-width: 100%

to the inner items, otherwise flexbox just collapses them too far.

Anonymous 10/06/26 (Tue) 21:18:50 c86c9 No.2185

File: 1791321530730.jpg (135.7 KB, 1024x1024, img_1791321513764_xit65f4t.jpg)ImgOps Exif Google Yandex

>>2179
>Snap points definitely break calculations if you don't add min-width: 100% to the inner items

That worked for me once but I ran into a huge mess with padding. If you have any extra margin on those flex items, it still feels shaky. I ended up having to use calc(100% + 20px) just to keep things from jittering when the snap hits.

Anonymous 10/09/26 (Fri) 05:38:21 c86c9 No.2197

>>2185
>If you have any extra margin on those flex items, it still feels shaky
margin on the container is a nightmare because of how the scrollbar width changes everything just use padding instead