如何使用 Tailwind 向我的内容部分添加滚动条？

Posted

技术标签:

【中文标题】如何使用 Tailwind 向我的内容部分添加滚动条？【英文标题】：How can I add a scroll bar to my content section using Tailwind? 【发布时间】：2022-01-03 22:11:54 【问题描述】：

这是它的外观，里面有一点内容：

但是，如果我添加很多内容，它看起来像这样：

它将搜索栏向下推。相反，我希望内容部分增长到占据用户屏幕的所有剩余可用高度，但永远不会超过容器的 100vh。理想情况下，如果内容超出容器，就会出现滚动条。

<!-- Tailwind -->
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">


<!-- Body -->
<div class="flex flex-col h-screen items-stretch bg-blue-300">
  <div class="flex flex-col flex-grow pt-3 bg-gray-100 rounded">
    <div class="flex border-b border-gray-300 pl-3"><button class="flex py-5 px-5 rounded-tl rounded-tr relative top-1 text-gray-800 ">First Tab</button><button class="flex py-5 px-5 rounded-tl rounded-tr relative top-1 text-gray-800 bg-white border border-gray-300 border-b-white">Second Tab</button></div>
    <div class="bg-white flex flex-col flex-grow py-5 px-5 relative border-b space-y-4 border-gray-300">
      <div class="space-y-4">
        <p class="text-gray-400">25th November 2021</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
      </div>
    </div>
    <div class="flex justify-center py-3 h-16 ">
      <div class="flex flex-grow px-3">
        <div class="flex flex-grow rounded ">
          <div data-testid="input-container" class="border-gray-300 flex flex-grow rounded border ">
            <div data-testid="call-history-search-icon-container" class="flex px-4 py-2 items-center text-gray-600 bg-gray-200 "><svg stroke="currentColor" fill="currentColor" stroke- viewBox="0 0 512 512"   xmlns="http://www.w3.org/2000/svg">
                    <path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path>
                  </svg></div><input type="text" name="call-history-search" id="call-history-search" data-testid="call-history-search" placeholder="Start typing to search..." class="px-3 flex flex-grow  border-l rounded-tr rounded-br border-gray-300"
              value="">
          </div>
        </div><button data-testid="search-reset-button" class="bg-blue-500 hover:bg-blue-600 px-4 py-2 rounded text-white ml-7"><svg stroke="currentColor" fill="currentColor" stroke- viewBox="0 0 512 512"   xmlns="http://www.w3.org/2000/svg">
                <path d="M500.33 0h-47.41a12 12 0 0 0-12 12.57l4 82.76A247.42 247.42 0 0 0 256 8C119.34 8 7.9 119.53 8 256.19 8.1 393.07 119.1 504 256 504a247.1 247.1 0 0 0 166.18-63.91 12 12 0 0 0 .48-17.43l-34-34a12 12 0 0 0-16.38-.55A176 176 0 1 1 402.1 157.8l-101.53-4.87a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12h200.33a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12z"></path>
              </svg></button>
      </div>
    </div>
  </div>
</div>

到目前为止我所拥有的 Codepen 示例：https://codepen.io/andydmc/pen/dyzxYKw?editors=1010

【问题讨论】：

【参考方案1】：

我只做了 2 处更改：

更改 #1（第 6 行）： 我添加了 max-h-screen 类来为容器提供视口的最大高度

更改 #2（第 10 行）： 我添加了类h-0 以使元素的高度为0。然后我让它增长到使用flex-grow 占据视口的所有剩余空间。为了使用滚动条管理溢出，我将overflow-y-auto 添加为类。

<!-- Tailwind -->
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">


<!-- Body -->
<div class="flex flex-col h-screen items-stretch bg-blue-300 max-h-screen"> <!--Change #1 -->
  <div class="flex flex-col flex-grow pt-3 bg-gray-100 rounded">
    <div class="flex border-b border-gray-300 pl-3"><button class="flex py-5 px-5 rounded-tl rounded-tr relative top-1 text-gray-800 ">First Tab</button><button class="flex py-5 px-5 rounded-tl rounded-tr relative top-1 text-gray-800 bg-white border border-gray-300 border-b-white">Second Tab</button></div>
    <div class="bg-white flex flex-col flex-grow py-5 px-5 relative border-b space-y-4 border-gray-300">
      <div class="space-y-4 h-0 flex-grow overflow-y-auto"> <!-- Change #2 -->
        <p class="text-gray-400">25th November 2021</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
        <p>This is some content</p>
      </div>
    </div>
    <div class="flex justify-center py-3 h-16 ">
      <div class="flex flex-grow px-3">
        <div class="flex flex-grow rounded ">
          <div data-testid="input-container" class="border-gray-300 flex flex-grow rounded border ">
            <div data-testid="call-history-search-icon-container" class="flex px-4 py-2 items-center text-gray-600 bg-gray-200 "><svg stroke="currentColor" fill="currentColor" stroke- viewBox="0 0 512 512"   xmlns="http://www.w3.org/2000/svg">
                    <path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path>
                  </svg></div><input type="text" name="call-history-search" id="call-history-search" data-testid="call-history-search" placeholder="Start typing to search..." class="px-3 flex flex-grow  border-l rounded-tr rounded-br border-gray-300"
              value="">
          </div>
        </div><button data-testid="search-reset-button" class="bg-blue-500 hover:bg-blue-600 px-4 py-2 rounded text-white ml-7"><svg stroke="currentColor" fill="currentColor" stroke- viewBox="0 0 512 512"   xmlns="http://www.w3.org/2000/svg">
                <path d="M500.33 0h-47.41a12 12 0 0 0-12 12.57l4 82.76A247.42 247.42 0 0 0 256 8C119.34 8 7.9 119.53 8 256.19 8.1 393.07 119.1 504 256 504a247.1 247.1 0 0 0 166.18-63.91 12 12 0 0 0 .48-17.43l-34-34a12 12 0 0 0-16.38-.55A176 176 0 1 1 402.1 157.8l-101.53-4.87a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12h200.33a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12z"></path>
              </svg></button>
      </div>
    </div>
  </div>
</div>

【讨论】：

以上是关于如何使用 Tailwind 向我的内容部分添加滚动条？的主要内容，如果未能解决你的问题，请参考以下文章

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

CSS/Tailwind 让 flex-grow 孩子在溢出时滚动

如何使用 Tailwind 和 Nuxt.js 突出显示导航栏上的活动部分？

使用嵌套的弹性容器滚动固定容器的一部分（vue/tailwind）

使用反应滚动浏览部分[重复]

Tailwind 如何修复侧边栏？