I'm currently working on a Vue project and I've included the following HTML:
<div class="flex flex-col md:flex-row">
<div class="m-6 ml-10 mr-5 mt-10">
<div class="text-left">
<input type="text" class="mb-6 h-10 w-full rounded-lg border-2 border-gray-300 p-2" placeholder="Search for workouts, profiles, etc." />
</div>
<div class=" ">
<div class="mb-3 text-left">
<p>Discovering new workouts</p>
</div>
<div class="flex h-28 flex-row gap-3 overflow-x-auto whitespace-nowrap">
<div class="box inline-flex min-w-52 bg-black"></div>
<div class="box inline-block min-w-52 bg-black"></div>
<div class="box min-w-52 bg-black"></div>
<div class="box min-w-52 bg-black"></div>
<div class="box min-w-52 bg-black"></div>
<div class="box min-w-52 bg-black"></div>
<div class="box mb-5 min-w-52 bg-black"></div>
</div>
</div>
</div>
</div>
I am utilizing tailwind CSS in this scenario. A challenge I am facing is that the overflow-x-auto property doesn't seem to function correctly on larger screen sizes but functions properly when the screen size is minimized. On bigger screens, it scrolls into white space instead of staying within its container. Below are screenshots depicting how it appears on different screen sizes:
On a large screen: https://i.sstatic.net/Wi2EkREw.png
On a small screen: https://i.sstatic.net/TpGBMvFJ.png