Grid Horizontal Scroll issue
I want horizontal scroll when screen size is 768px. The horizontal scroll works. But the issue is, there are 5 div in this example and the first div is not showing and is to the left size of the screen and hidden. Here in the pictures if you see. The 5 div with text Rank 1 to Rank 5 but when screen size reach to 768px the Rank 1 hidden to left size.
TailwindCSS
max-md:auto-cols-[minmax(12rem,auto)]
max-md:grid-flow-col
max-md:gap-x-4
max-md:overflow-x-scroll
CSS:
.example{
display: grid;
height: 100%;
gap: 10px;
grid-auto-columns: minmax(12rem, auto);
grid-auto-flow: column;
overflow-x: scroll;
}
https://play.tailwindcss.com/eGqOSSyixm
Tailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
2 Replies
Unknown User•13mo ago
Message Not Public
Sign In & Join Server To View
aaargh! why haven't I noticed this before? Thank you, my friend.