CODEWITHSUNDEEP
tailwind-css
josef
josef

Reputation: 193

Tailwind CSS horizontal scrolling when content overflows

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>

Upvotes: 11

Views: 51783

Answers (1)

ptts
ptts

Reputation: 2086

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:

<script src="https://cdn.tailwindcss.com"></script>

<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

Upvotes: 27

Related Questions