title: Tailwind CSS horizontal scrolling when content overflows
body: <p>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?</p>
  <p>Not working</p>
  <pre><code>&lt;div class=&quot;flex overflow-x-auto space-x-8&quot;&gt;
  &lt;section class=&quot;h-13 w-13 rounded-full border-2 border-purple-300&quot;&gt;
    &lt;span&gt;&lt;img src=&quot;download.jfif&quot; class=&quot;h-13 w-13 rounded-full border-2 border-purple-300&quot; alt=&quot;&quot;&gt;&lt;/span&gt;
     &lt;span&gt;John&lt;/span&gt;
  &lt;/section&gt;
  &lt;section class=&quot;h-13 w-13 rounded-full border-2 border-purple-300&quot;&gt;
    &lt;span&gt;&lt;img src=&quot;download.jfif&quot; class=&quot;h-13 w-13 rounded-full border-2 border-purple-300&quot; alt=&quot;&quot;&gt;&lt;/span&gt;
     &lt;span&gt;John&lt;/span&gt;
  &lt;/section&gt;
  &lt;section class=&quot;h-13 w-13 rounded-full border-2 border-purple-300&quot;&gt;
    &lt;span&gt;&lt;img src=&quot;download.jfif&quot; class=&quot;h-13 w-13 rounded-full border-2 border-purple-300&quot; alt=&quot;&quot;&gt;&lt;/span&gt;
     &lt;span&gt;John&lt;/span&gt;
  &lt;/section&gt; 
  &lt;/div&gt;
  </code></pre>
  <p>If I put it like below, it's working, but I do not want it this way.</p>
  <pre><code>&lt;div class=&quot;flex overflow-x-auto space-x-5&quot;&gt; 
        &lt;img src=&quot;download.jfif&quot; class=&quot;h-10 w-10 rounded-full&quot; alt=&quot;Bhutan&quot;&gt;
        &lt;img src=&quot;download.jfif&quot; class=&quot;h-10 w-10 rounded-full&quot; alt=&quot;Bhutan&quot;&gt;    
        &lt;img src=&quot;download.jfif&quot; class=&quot;h-10 w-10 rounded-full&quot; alt=&quot;Bhutan&quot;&gt;    
        &lt;img src=&quot;download.jfif&quot; class=&quot;h-10 w-10 rounded-full&quot; alt=&quot;Bhutan&quot;&gt;    
        &lt;img src=&quot;download.jfif&quot; class=&quot;h-10 w-10 rounded-full&quot; alt=&quot;Bhutan&quot;&gt;
        &lt;img src=&quot;download.jfif&quot; class=&quot;h-10 w-10 rounded-full&quot; alt=&quot;Bhutan&quot;&gt;    
        &lt;img src=&quot;download.jfif&quot; class=&quot;h-10 w-10 rounded-full&quot; alt=&quot;Bhutan&quot;&gt;    
  &lt;/div&gt;
  </code></pre>