Make overflow without absolute max-width

I want to make container with horizontal scroll and use flexbox for it:
.grid {
display: flex;
gap: 0.5rem;
flex-wrap: nowrap;
list-style: none;
overflow-x: scroll;
}

.item {
height: 16rem;
/* aspect ration comes from inline styles */
position: relative;
flex: 0 0 auto;
}
.grid {
display: flex;
gap: 0.5rem;
flex-wrap: nowrap;
list-style: none;
overflow-x: scroll;
}

.item {
height: 16rem;
/* aspect ration comes from inline styles */
position: relative;
flex: 0 0 auto;
}
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.
No description
13 Replies
ἔρως
ἔρως3w ago
you can use max-width: 100dvw or max-width: 100% those are relative units, not absolute units
Arctomachine
ArctomachineOP3w ago
100% 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
ἔρως
ἔρως3w ago
do you have thr viewport meta tag set?
Arctomachine
ArctomachineOP3w ago
Yes
ἔρως
ἔρως3w ago
what do you have set it to?
Arctomachine
ArctomachineOP3w ago
<meta name="viewport" content="width=device-width, initial-scale=1">
ἔρως
ἔρως3w ago
can you make a jsfiddle or codepen that shows the problem?
Arctomachine
ArctomachineOP3w ago
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 🤷
ἔρως
ἔρως3w ago
🤣 what did you do?
Arctomachine
ArctomachineOP3w ago
Went to browser style tab, typed same styles and saw it working. Then put them back into code and it kept working
ἔρως
ἔρως3w ago
maybe it was a bug
Arctomachine
ArctomachineOP3w ago
I think so too, somewhere in bundler probably
ἔρως
ἔρως3w ago
maybe a bad cached file

Did you find this page helpful?