css - 如何在顺风中保持单个网格列的高度

Question

在下面的示例中(请参阅此处的顺风播放:https://play.tailwindcss.com/wUWT1PCfEU)，如果第一个 <details>打开后，其他列的高度会随之增加。

<div class="grid grid-cols-1 sm:grid-cols-3">
  <div class="bg-gray-400">
    <details>
      <summary>aaaa</summary>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in dui vitae nunc porta finibus eu ut turpis. Donec rhoncus, mauris at fringilla ullamcorper, nibh lacus laoreet sapien, non viverra lectus diam non dolor.
    </details>
  </div>
  <div class="bg-green-400">
    <details>
      <summary>bbbb</summary>
      A small text
    </details>
  </div>
  <div class="bg-purple-400">
    <details>
      <summary>cccc</summary>
      A medium text
    </details>
  </div>
</div>

如何避免这种情况，每列都有单独的高度？

Answer 1

您可以使用 tailwind flex 来实现它。考虑下面的代码片段:

<div class="flex w-full">
  <div class="bg-gray-400 w-4/12 h-full">
    <details>
      <summary>aaaa</summary>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in dui vitae nunc porta finibus eu ut turpis. Donec rhoncus, mauris at fringilla ullamcorper, nibh lacus laoreet sapien, non viverra lectus diam non dolor.
    </details>
  </div>
  <div class="bg-green-400 w-4/12 h-full">
    <details>
      <summary>bbbb</summary>
      A small text
    </details>
  </div>
  <div class="bg-purple-400 w-4/12 h-full">
    <details>
      <summary>cccc</summary>
      A medium text
    </details>
  </div>
</div>

Working Example