Make overflow without absolute max-width
I want to make container with horizontal scroll and use flexbox for it:
Problem: instead of overflowing .grid, it stretches nearest parent with absolute max width (pixels) to combined width of .items
Is it possible to make this scroll without giving .grid absolute width?
If not, what other solution can I use here?
Image of what I want to achieve.

13 Replies
you can use
max-width: 100dvw
or max-width: 100%
those are relative units, not absolute units100% makes no difference when applied to any parent below that one with absolute value. And if absolute is not set, it stretches whole page instead
do you have thr viewport meta tag set?
Yes
what do you have set it to?
<meta name="viewport" content="width=device-width, initial-scale=1">
can you make a jsfiddle or codepen that shows the problem?
I was sure I could not reproduce it because it is normally correct workflow. And after I tried in codepen, my project started working too
🤷
🤣
what did you do?
Went to browser style tab, typed same styles and saw it working. Then put them back into code and it kept working
maybe it was a bug
I think so too, somewhere in bundler probably
maybe a bad cached file