<p>我正在尝试理解TailwindCSS，并且目前正在尝试制作<strong>响应式员工卡片</strong>。但我最近遇到的问题是，我的卡片在Tailwind的所有断点上都是响应式的，但<strong>只有当高度为900时。</strong>每当我增加高度时，底部会有更多空间，而当我缩小窗口高度时，内容会溢出。</p> <p><strong>如何使其适应所有高度和宽度？</strong></p> <p>[<strong>只有当高度为900且在Tailwind断点宽度范围内时才能完美工作</strong>]</p><p> 这是现场预览</p><p> 这是Github Repo-Code</p> <p>代码 -</p> <pre class="brush:php;toolbar:false;">&lt;body class=&quot;flex justify-center items-center h-screen w-full&quot;&gt; &lt;div class=&quot;main-container bg-slate-500 min-h-3/6 w-8/12 sm:w-8/12 sm:min-h-3/6 md:w-7/12 md:min-h-2.5/6 lg:w-5/12 lg:min-h-2.5/6 xl:w-4/12 xl:min-h-2.5/6 2xl:w-3.5/12 2xl:min-h-4/6 flex justify-center items-center py-20&quot;&gt; &lt;div class=&quot;container bg-slate-200 w-8/12 h-4/6 flex flex-col rounded-lg&quot;&gt; &lt;div class=&quot;title py-4 px-5 font-bold&quot;&gt;这里是卡片的标题&lt;/div&gt; &lt;div class=&quot;review-date grid grid-cols-2 bg-white w-full h-1/6 items-center p-2 px-4 text-center&quot;&gt; &lt;div class=&quot;review flex justify-center items-center text-xs bg-orange-700 text-white font-semibold p-1 sm:w-10/12 sm:py-1 rounded-full uppercase select-none&quot;&gt; UNDER REVIEW &lt;/div&gt; &lt;div class=&quot;date flex justify-end items-center text-xs font-semibold select-none&quot;&gt; May 14, 1988 &lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;comment bg-white border-t border-slate-100 w-full&quot;&gt; &lt;p class=&quot;commentdata bg-slate-200 text-left text-sm p-3 m-4 rounded-lg select-none&quot;&gt;这是关于这位员工的简短评论。&lt;/p&gt; &lt;/div&gt; &lt;div class=&quot;employeedata px-4 pt-2 pb-4&quot;&gt; &lt;div class=&quot;employee uppercase&quot;&gt; &lt;label class=&quot;text-xs font-bold text-slate-600&quot;&gt;员工&lt;/label&gt; &lt;/div&gt; &lt;div class=&quot;employeebar flex mt-2&quot;&gt; &lt;div class=&quot;employee-logo bg-sky-800 text-white text-xs font-bold w-10 h-10 rounded-full flex justify-center items-center&quot;&gt;VG&lt;/div&gt; &lt;div class=&quot;employee-info flex flex-col ml-4&quot;&gt; &lt;div class=&quot;employee-name text-sm font-bold flex pb-0.5&quot;&gt;Mohammad Mustak&lt;/div&gt; &lt;div class=&quot;employee-title text-xs text-slate-600&quot;&gt;Web Developer&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt;</pre></p>

<div class="main-container bg-slate-500 min-h-3/6 w-8/12 sm:w-8/12 sm:min-h-3/6 md:w-7/12 md:min-h-2.5/6 lg:w-5/12 lg:min-h-2.5/6 xl:w-4/12 xl:min-h-2.5/6 2xl:w-3.5/12 2xl:min-h-4/6 flex justify-center items-center py-20">