Tailwind CSS horizontal scrolling when content overflows

user_10362611 0
Viewed 12785

Using Tailwind CSS, I want to apply the scrolling effect when the content is too large to fit the screen width. I have a div container that holds the child elements, which I want to scroll. When I use a section to hold the image and the username (shown below), they all shrink to fit the screen size. This is not what I want. I want only a few sections to appear and the rest when I scroll. What am I missing?

Not working

<div class="flex overflow-x-auto space-x-8">
<section class="h-13 w-13 rounded-full border-2 border-purple-300">
  <span><img src="download.jfif" class="h-13 w-13 rounded-full border-2 border-purple-300" alt=""></span>
   <span>John</span>
</section>
<section class="h-13 w-13 rounded-full border-2 border-purple-300">
  <span><img src="download.jfif" class="h-13 w-13 rounded-full border-2 border-purple-300" alt=""></span>
   <span>John</span>
</section>
<section class="h-13 w-13 rounded-full border-2 border-purple-300">
  <span><img src="download.jfif" class="h-13 w-13 rounded-full border-2 border-purple-300" alt=""></span>
   <span>John</span>
</section> 
</div>

If I put it like below, it's working, but I do not want it this way.

<div class="flex overflow-x-auto space-x-5"> 
      <img src="download.jfif" class="h-10 w-10 rounded-full" alt="Bhutan">
      <img src="download.jfif" class="h-10 w-10 rounded-full" alt="Bhutan">    
      <img src="download.jfif" class="h-10 w-10 rounded-full" alt="Bhutan">    
      <img src="download.jfif" class="h-10 w-10 rounded-full" alt="Bhutan">    
      <img src="download.jfif" class="h-10 w-10 rounded-full" alt="Bhutan">
      <img src="download.jfif" class="h-10 w-10 rounded-full" alt="Bhutan">    
      <img src="download.jfif" class="h-10 w-10 rounded-full" alt="Bhutan">    
</div>
tailwind-css
1 Answers

First, 13 is not a valid value for height/width. (https://tailwindcss.com/docs/height) That likely causes some of your issues.

You can put flex-shrink-0 on all the section elements to prevent the images from shrinking instead of scrolling.

But as you've defined the fixed width of the section to be the same as the image, you will also get vertical scrolling.

Check out the following example:

<link href="https://unpkg.com/tailwindcss@2.1.1/dist/tailwind.min.css" rel="stylesheet" />

<div class="flex overflow-x-auto space-x-8 w-1/2 bg-red-200">
  <section class="flex-shrink-0 rounded-full border-2 border-purple-300">
    <span><img src="download.jfif" class="bg-purple-200 h-14 w-14 rounded-full border-2 border-purple-300" alt="" /></span>
    <span>John</span>
  </section>
  <section class="flex-shrink-0 rounded-full border-2 border-purple-300">
    <span><img src="download.jfif" class="bg-purple-200 h-14 w-14 rounded-full border-2 border-purple-300" alt="" /></span>
    <span>John</span>
  </section>
  <section class="flex-shrink-0 rounded-full border-2 border-purple-300">
    <span><img src="download.jfif" class="bg-purple-200 h-14 w-14 rounded-full border-2 border-purple-300" alt="" /></span>
    <span>John</span>
  </section>
  <section class="flex-shrink-0 rounded-full border-2 border-purple-300">
    <span><img src="download.jfif" class="bg-purple-200 h-14 w-14 rounded-full border-2 border-purple-300" alt="" /></span>
    <span>John</span>
  </section>
  <section class="flex-shrink-0 rounded-full border-2 border-purple-300">
    <span><img src="download.jfif" class="bg-purple-200 h-14 w-14 rounded-full border-2 border-purple-300" alt="" /></span>
    <span>John</span>
  </section>
  <section class="flex-shrink-0 rounded-full border-2 border-purple-300">
    <span><img src="download.jfif" class="bg-purple-200 h-14 w-14 rounded-full border-2 border-purple-300" alt="" /></span>
    <span>John</span>
  </section>
  <section class="flex-shrink-0 rounded-full border-2 border-purple-300">
    <span><img src="download.jfif" class="bg-purple-200 h-14 w-14 rounded-full border-2 border-purple-300" alt="" /></span>
    <span>John</span>
  </section>
  <section class="flex-shrink-0 rounded-full border-2 border-purple-300">
    <span><img src="download.jfif" class="bg-purple-200 h-14 w-14 rounded-full border-2 border-purple-300" alt="" /></span>
    <span>John</span>
  </section>
</div>

https://play.tailwindcss.com/4B5d6ne1s5

user_137749920
Related