CSS网格填充相同高度的容器，按钮在底部

Question

我有以下示例，用顺风css编写:

https://play.tailwindcss.com/f9iOK1e0oM

我想让我的控制按钮在底部，如果网格容器，但是，他们有不同的内容大小的蓝色标签;盒子，所以网格的高度增加了一些容器。然而，当我使用网格时，所有的盒子都得到这个高度。这没关系。但是我的控制按钮应该总是在容器的底部，所以"Enabled"one_answers";Delete"第二个容器不应该离底部太远

如何实现这一点?

Answer 1

需要将flex flex-col添加到li元素中。grow为第一个子div,grow-0 max-h-max为第二个子div。

<li class="flex flex-col col-span-1 divide-y divide-gray-200 rounded-lg bg-white shadow">
<div class=" grow flex w-full flex-col items-start justify-between p-6">
<div class="flex w-full items-start justify-between space-x-3">
<h3 class="truncate text-sm font-medium text-gray-900">243rfh83294d-23r8fj2n48r-24fi43bf</h3>
<span class="inline-block flex-shrink-0 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800"> running </span>
</div>
<p class="mt-1 whitespace-pre-wrap text-xs font-bold text-gray-500">Interval: <span class="font-normal">1234</span></p>
<p class="mt-1 whitespace-pre-wrap text-xs font-bold text-gray-500">Next run: <span class="font-normal">1234</span></p>
<p class="mt-1 whitespace-pre-wrap">
<span class="inline-block flex-shrink-0 rounded-full bg-blue-100 px-2 py-0.5 text-xs text-blue-800">test 1</span>
</p>
</div>
<div>
<div class="-mt-px flex shrink-0 grow-0 divide-x divide-gray-200 max-h-max">
<div class="flex w-0 flex-1">
<button class="relative -mr-px inline-flex w-0 flex-1 items-center justify-center rounded-bl-lg border border-transparent py-4 text-sm font-medium text-gray-700 hover:text-gray-500">
<span class="ml-3">Enabled</span>
</button>
</div>
<div class="-ml-px flex w-0 flex-1">
<button class="group relative inline-flex w-0 flex-1 items-center justify-center rounded-br-lg border border-transparent py-4 text-sm font-medium text-gray-700 transition hover:text-red-500">
<span class="ml-3">Delete</span>
</button>
</div>
</div>
</div>
</li>

https://play.tailwindcss.com/ilTMM5glku

我只对第二张牌这样做了，但是你应该对所有的牌都这样做。这样，当内容改变时，按钮行将始终粘在底部，并在所有卡片中保持相同的高度。

希望对你有帮助。