如何使用Tailwind为内容区域添加滚动条避免挤压下方搜索栏

解决方案 #

仅需调整两处类名即可实现需求：

• 给白色背景的内容外层容器（<div class="bg-white flex flex-col flex-grow py-5 px-5 relative border-b space-y-4 border-gray-300">）新增 overflow-hidden 类，限制容器高度不会超出视口分配的剩余空间
• 给包裹所有内容段落的内层 <div class="space-y-4"> 新增 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">
  <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 overflow-hidden">
      <div class="space-y-4 overflow-y-auto">
        <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>
        <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-width="0" viewBox="0 0 512 512" height="1em" width="1em" 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-width="0" viewBox="0 0 512 512" height="1em" width="1em" 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>

内容的提问来源于stack exchange，提问作者Andy Leigh