内容溢出时顺风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)，这可能会导致您的一些问题。

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

但是，由于您已经将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">
  <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