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
ἔρως
ἔρως3mo ago
you can use max-width: 100dvw or max-width: 100% those are relative units, not absolute units
Arctomachine
ArctomachineOP3mo 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
ἔρως
ἔρως3mo ago
do you have thr viewport meta tag set?
Arctomachine
ArctomachineOP3mo ago
Yes
ἔρως
ἔρως3mo ago
what do you have set it to?
Arctomachine
ArctomachineOP3mo ago
<meta name="viewport" content="width=device-width, initial-scale=1">
ἔρως
ἔρως3mo ago
can you make a jsfiddle or codepen that shows the problem?
Arctomachine
ArctomachineOP3mo 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 🤷
ἔρως
ἔρως3mo ago
🤣 what did you do?
Arctomachine
ArctomachineOP3mo ago
Went to browser style tab, typed same styles and saw it working. Then put them back into code and it kept working
ἔρως
ἔρως3mo ago
maybe it was a bug
Arctomachine
ArctomachineOP3mo ago
I think so too, somewhere in bundler probably
ἔρως
ἔρως3mo ago
maybe a bad cached file

Did you find this page helpful?