内容溢出时的 Tailwind CSS 水平滚动

Question

使用 Tailwind CSS，我想在内容太大而无法适应屏幕宽度时应用滚动效果。我有一个包含要滚动的子元素的 div 容器。当我使用一个部分来保存图像和用户名（如下所示）时，它们都会缩小以适应屏幕尺寸。这不是我想要的。我希望只显示几个部分，其余部分在滚动时显示。我错过了什么？

不工作

<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>

如果我像下面这样说，它可以工作，但我不希望这样。

<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>

Answer 1

首先，13 不是高度/宽度的有效值。 (https://tailwindcss.com/docs/height) 这可能会导致您的一些问题。

您可以将flex-shrink-0 放在所有section 元素上，以防止图像缩小而不是滚动。

但是当您将section 的固定宽度定义为与图像相同时，您还将获得垂直滚动。

查看以下示例：

<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