如何使用 Tailwind 向我的内容部分添加滚动条？
How can I add a scroll bar to my content section using Tailwind?
下面是里面有一点内容的样子：
但是，如果我添加很多内容，它看起来像这样：
它将搜索栏向下推。相反，我想要发生的是内容部分增长到占据用户屏幕的所有剩余可用高度，但永远不会超过容器的 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-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>
我目前拥有的 Codepen 示例：
https://codepen.io/andydmc/pen/dyzxYKw?editors=1010
我只做了 2 处更改：
更改 #1（第 6 行）：
我添加了 class max-h-screen 来为容器提供视口的最大高度
更改 #2（第 10 行）：
我添加了 class h-0 以使元素的高度为 0。然后我让它增长以使用 flex-grow 占据视口的所有剩余 space。为了使用滚动条管理溢出，我将 overflow-y-auto 添加为 class.
<!-- 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-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>
下面是里面有一点内容的样子：
但是，如果我添加很多内容，它看起来像这样：
它将搜索栏向下推。相反，我想要发生的是内容部分增长到占据用户屏幕的所有剩余可用高度，但永远不会超过容器的 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-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>
我目前拥有的 Codepen 示例：
https://codepen.io/andydmc/pen/dyzxYKw?editors=1010
我只做了 2 处更改：
更改 #1（第 6 行）：
我添加了 class max-h-screen 来为容器提供视口的最大高度
更改 #2（第 10 行）：
我添加了 class h-0 以使元素的高度为 0。然后我让它增长以使用 flex-grow 占据视口的所有剩余 space。为了使用滚动条管理溢出，我将 overflow-y-auto 添加为 class.
<!-- 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-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>