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

Question

我有以下示例，用尾风CSS编写：

https://play.tai​​l.tail.tail.tailwindcss.com/f9iok/f9iok/f9iok1eok1e0om i i i i i i

i>想要将我的控制按钮放在底部，如果网格容器具有不同的内容尺寸的蓝色“标签”框，因此网格的高度增加了一些容器。但是，当我使用网格时，所有盒子都得到了这个高度。没关系。但是我的控制按钮应该始终位于容器的底部，以便在第二个容器的底部不应远离“启用”和“删除”。

如何实现这一目标？

Answer 1

您需要将flex-col添加到li元素。 <代码>将添加到第一个儿童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.tai​​lwindcss.com/iltmm5glklku

我只在第二张卡中做到了这一点，但是您应该为所有卡做。因此，当内容更改时，按钮行将始终粘在底部并保持所有卡中的相同高度。

希望这会有所帮助。