在 tailwind css 中如何为具有指定 text-4xl 大小的空 div 设置最小高度

Question

我需要像 min-h-4xl 这样的东西，所以当 div 的上下文为空时，它仍然与带有文本的其他 div 具有相同的高度。 因此，当没有表情符号（文本）时，我需要保持相同的大小。

https://fragmentio.com/english-english/in_the_long_run 这里我们使用相同大小的块来显示在不同语言中难以发音的短语，有时会缺少翻译或表情符号。

我不想像 min-h-24 那样对 min-h-size 进行硬编码，因为稍后我很容易忘记更改它，并更改文本大小的默认值。我不想在这个块中显示一些隐藏的文本。

Answer 1

Flex 布局的直接子级已经具有相同的高度。因此，您应该能够利用这一点并将

height: 100%

应用于绘制边框的元素，以使元素在视觉上具有相同的高度：

<script src="https://cdn.tailwindcss.com/3.3.5"></script>

<div class="flex overflow-x-auto space-x-4 mt-12">

  <div class="flex-none w-64 mb-4">
    <a href="https://fragmentio.com/english-english/against_all_odds">
      <div class="relative bg-gradient-to-br bg-white border-2 border-gray-500 p-4 rounded-lg shadow-md text-amber-900 h-full">
        <div class="absolute left-0 top-0 bg-gray-500 text-gray-50 text-sm font-medium rounded-tl-md rounded-br-md px-2 py-1">
          B1
        </div>
        <div class="absolute right-0 top-0 text-gray-500 text-xs font-medium rounded-bl-md rounded-tr-md px-2 py-1">
          33
        </div>
        <div class="items-center justify-center">
          <div class="truncate text-center text-4xl mb-4">🎲</div>
          <div class="truncate ... text-center text-lg text-gray-600 font-medium">against all odds</div>

        </div>
      </div>
    </a>
  </div>

  <div class="flex-none w-64 mb-4">
    <a href="https://fragmentio.com/english-english/garden">
      <div class="relative bg-gradient-to-br bg-white border-2 border-gray-500 p-4 rounded-lg shadow-md text-amber-900 h-full">
        <div class="absolute left-0 top-0 bg-gray-500 text-gray-50 text-sm font-medium rounded-tl-md rounded-br-md px-2 py-1">
          B1
        </div>
        <div class="absolute right-0 top-0 text-gray-500 text-xs font-medium rounded-bl-md rounded-tr-md px-2 py-1">
          661
        </div>
        <div class="items-center justify-center">
          <div class="truncate text-center text-4xl mb-4"></div>
          <div class="truncate ... text-center text-lg text-gray-600 font-medium">garden</div>

        </div>
      </div>
    </a>
  </div>

  <div class="flex-none w-64 mb-4">
    <a href="https://fragmentio.com/english-english/on_the_other_hand">
      <div class="relative bg-gradient-to-br bg-white border-2 border-gray-500 p-4 rounded-lg shadow-md text-amber-900 h-full">
        <div class="absolute left-0 top-0 bg-gray-500 text-gray-50 text-sm font-medium rounded-tl-md rounded-br-md px-2 py-1">
          B1
        </div>
        <div class="absolute right-0 top-0 text-gray-500 text-xs font-medium rounded-bl-md rounded-tr-md px-2 py-1">
          17
        </div>
        <div class="items-center justify-center">
          <div class="truncate text-center text-4xl mb-4">🤲</div>
          <div class="truncate ... text-center text-lg text-gray-600 font-medium">on the other hand</div>

        </div>
      </div>
    </a>
  </div>

  <div class="flex-none w-64 mb-4">
    <a href="https://fragmentio.com/english-english/paella">
      <div class="relative bg-gradient-to-br bg-white border-2 border-gray-500 p-4 rounded-lg shadow-md text-amber-900 h-full">
        <div class="absolute left-0 top-0 bg-gray-500 text-gray-50 text-sm font-medium rounded-tl-md rounded-br-md px-2 py-1">
          B1
        </div>
        <div class="absolute right-0 top-0 text-gray-500 text-xs font-medium rounded-bl-md rounded-tr-md px-2 py-1">
          75
        </div>
        <div class="items-center justify-center">
          <div class="truncate text-center text-4xl mb-4">🥘</div>
          <div class="truncate ... text-center text-lg text-gray-600 font-medium">paella</div>

        </div>
      </div>
    </a>
  </div>

  <div class="flex-none w-64 mb-4">
    <a href="https://fragmentio.com/english-english/cut_corners">
      <div class="relative bg-gradient-to-br bg-white border-2 border-gray-500 p-4 rounded-lg shadow-md text-amber-900 h-full">
        <div class="absolute left-0 top-0 bg-gray-500 text-gray-50 text-sm font-medium rounded-tl-md rounded-br-md px-2 py-1">
          B1
        </div>
        <div class="absolute right-0 top-0 text-gray-500 text-xs font-medium rounded-bl-md rounded-tr-md px-2 py-1">
          24
        </div>
        <div class="items-center justify-center">
          <div class="truncate text-center text-4xl mb-4">⚙️</div>
          <div class="truncate ... text-center text-lg text-gray-600 font-medium">cut corners</div>

        </div>
      </div>
    </a>
  </div>

  <div class="flex-none w-64 mb-4">
    <a href="https://fragmentio.com/english-english/get_used_to">
      <div class="relative bg-gradient-to-br bg-white border-2 border-gray-500 p-4 rounded-lg shadow-md text-amber-900 h-full">
        <div class="absolute left-0 top-0 bg-gray-500 text-gray-50 text-sm font-medium rounded-tl-md rounded-br-md px-2 py-1">
          B1
        </div>
        <div class="absolute right-0 top-0 text-gray-500 text-xs font-medium rounded-bl-md rounded-tr-md px-2 py-1">
          25
        </div>
        <div class="items-center justify-center">
          <div class="truncate text-center text-4xl mb-4">🤓</div>
          <div class="truncate ... text-center text-lg text-gray-600 font-medium">get used to</div>

        </div>
      </div>
    </a>
  </div>

  <div class="flex-none w-64 mb-4">
    <a href="https://fragmentio.com/english-english/schedule">
      <div class="relative bg-gradient-to-br bg-white border-2 border-gray-500 p-4 rounded-lg shadow-md text-amber-900 h-full">
        <div class="absolute left-0 top-0 bg-gray-500 text-gray-50 text-sm font-medium rounded-tl-md rounded-br-md px-2 py-1">
          B1
        </div>
        <div class="absolute right-0 top-0 text-gray-500 text-xs font-medium rounded-bl-md rounded-tr-md px-2 py-1">
          284
        </div>
        <div class="items-center justify-center">
          <div class="truncate text-center text-4xl mb-4">📅</div>
          <div class="truncate ... text-center text-lg text-gray-600 font-medium">schedule</div>

        </div>
      </div>
    </a>
  </div>

  <div class="flex-none w-64 mb-4">
    <a href="https://fragmentio.com/english-english/genre">
      <div class="relative bg-gradient-to-br bg-white border-2 border-gray-500 p-4 rounded-lg shadow-md text-amber-900 h-full">
        <div class="absolute left-0 top-0 bg-gray-500 text-gray-50 text-sm font-medium rounded-tl-md rounded-br-md px-2 py-1">
          B1
        </div>
        <div class="absolute right-0 top-0 text-gray-500 text-xs font-medium rounded-bl-md rounded-tr-md px-2 py-1">
          180
        </div>
        <div class="items-center justify-center">
          <div class="truncate text-center text-4xl mb-4">🎶</div>
          <div class="truncate ... text-center text-lg text-gray-600 font-medium">genre</div>

        </div>
      </div>
    </a>
  </div>

  <div class="flex-none w-64 mb-4">
    <a href="https://fragmentio.com/english-english/on_the_same_page">
      <div class="relative bg-gradient-to-br bg-white border-2 border-gray-500 p-4 rounded-lg shadow-md text-amber-900 h-full">
        <div class="absolute left-0 top-0 bg-gray-500 text-gray-50 text-sm font-medium rounded-tl-md rounded-br-md px-2 py-1">
          B1
        </div>
        <div class="absolute right-0 top-0 text-gray-500 text-xs font-medium rounded-bl-md rounded-tr-md px-2 py-1">
          41
        </div>
        <div class="items-center justify-center">
          <div class="truncate text-center text-4xl mb-4">📄</div>
          <div class="truncate ... text-center text-lg text-gray-600 font-medium">on the same page</div>

        </div>
      </div>
    </a>
  </div>

  <div class="flex-none w-64 mb-4">
    <a href="https://fragmentio.com/english-english/foreign">
      <div class="relative bg-gradient-to-br bg-white border-2 border-gray-500 p-4 rounded-lg shadow-md text-amber-900 h-full">
        <div class="absolute left-0 top-0 bg-gray-500 text-gray-50 text-sm font-medium rounded-tl-md rounded-br-md px-2 py-1">
          B1
        </div>
        <div class="absolute right-0 top-0 text-gray-500 text-xs font-medium rounded-bl-md rounded-tr-md px-2 py-1">
          90
        </div>
        <div class="items-center justify-center">
          <div class="truncate text-center text-4xl mb-4"></div>
          <div class="truncate ... text-center text-lg text-gray-600 font-medium">foreign</div>

        </div>
      </div>
    </a>
  </div>

  <div class="flex-none w-64 mb-4">
    <a href="https://fragmentio.com/english-english/take_a_look">
      <div class="relative bg-gradient-to-br bg-white border-2 border-gray-500 p-4 rounded-lg shadow-md text-amber-900 h-full">
        <div class="absolute left-0 top-0 bg-gray-500 text-gray-50 text-sm font-medium rounded-tl-md rounded-br-md px-2 py-1">
          B1
        </div>
        <div class="absolute right-0 top-0 text-gray-500 text-xs font-medium rounded-bl-md rounded-tr-md px-2 py-1">
          311
        </div>
        <div class="items-center justify-center">
          <div class="truncate text-center text-4xl mb-4">👁️</div>
          <div class="truncate ... text-center text-lg text-gray-600 font-medium">take a look</div>

        </div>
      </div>
    </a>
  </div>

  <div class="flex-none w-64 mb-4">
    <a href="https://fragmentio.com/english-english/to_figure_out">
      <div class="relative bg-gradient-to-br bg-white border-2 border-gray-500 p-4 rounded-lg shadow-md text-amber-900 h-full">
        <div class="absolute left-0 top-0 bg-gray-500 text-gray-50 text-sm font-medium rounded-tl-md rounded-br-md px-2 py-1">
          B1
        </div>
        <div class="absolute right-0 top-0 text-gray-500 text-xs font-medium rounded-bl-md rounded-tr-md px-2 py-1">
          404
        </div>
        <div class="items-center justify-center">
          <div class="truncate text-center text-4xl mb-4">🤔</div>
          <div class="truncate ... text-center text-lg text-gray-600 font-medium">to figure out</div>

        </div>
      </div>
    </a>
  </div>

  <div class="flex-none w-64 mb-4">
    <a href="https://fragmentio.com/english-english/spaghetti">
      <div class="relative bg-gradient-to-br bg-white border-2 border-gray-500 p-4 rounded-lg shadow-md text-amber-900 h-full">
        <div class="absolute left-0 top-0 bg-gray-500 text-gray-50 text-sm font-medium rounded-tl-md rounded-br-md px-2 py-1">
          B1
        </div>
        <div class="absolute right-0 top-0 text-gray-500 text-xs font-medium rounded-bl-md rounded-tr-md px-2 py-1">
          413
        </div>
        <div class="items-center justify-center">
          <div class="truncate text-center text-4xl mb-4">🍝</div>
          <div class="truncate ... text-center text-lg text-gray-600 font-medium">spaghetti</div>

        </div>
      </div>
    </a>
  </div>

  <div class="flex-none w-64 mb-4">
    <a href="https://fragmentio.com/english-english/flour">
      <div class="relative bg-gradient-to-br bg-white border-2 border-gray-500 p-4 rounded-lg shadow-md text-amber-900 h-full">
        <div class="absolute left-0 top-0 bg-gray-500 text-gray-50 text-sm font-medium rounded-tl-md rounded-br-md px-2 py-1">
          B1
        </div>
        <div class="absolute right-0 top-0 text-gray-500 text-xs font-medium rounded-bl-md rounded-tr-md px-2 py-1">
          694
        </div>
        <div class="items-center justify-center">
          <div class="truncate text-center text-4xl mb-4"></div>
          <div class="truncate ... text-center text-lg text-gray-600 font-medium">flour</div>

        </div>
      </div>
    </a>
  </div>

  <div class="flex-none w-64 mb-4">
    <a href="https://fragmentio.com/english-english/as_a_matter_of_fact">
      <div class="relative bg-gradient-to-br bg-white border-2 border-gray-500 p-4 rounded-lg shadow-md text-amber-900 h-full">
        <div class="absolute left-0 top-0 bg-gray-500 text-gray-50 text-sm font-medium rounded-tl-md rounded-br-md px-2 py-1">
          B1
        </div>
        <div class="absolute right-0 top-0 text-gray-500 text-xs font-medium rounded-bl-md rounded-tr-md px-2 py-1">
          14
        </div>
        <div class="items-center justify-center">
          <div class="truncate text-center text-4xl mb-4">📣</div>
          <div class="truncate ... text-center text-lg text-gray-600 font-medium">as a matter of fact</div>

        </div>
      </div>
    </a>
  </div>

  <div class="flex-none w-64 mb-4">
    <a href="https://fragmentio.com/english-english/thoughtful">
      <div class="relative bg-gradient-to-br bg-white border-2 border-gray-500 p-4 rounded-lg shadow-md text-amber-900 h-full">
        <div class="absolute left-0 top-0 bg-gray-500 text-gray-50 text-sm font-medium rounded-tl-md rounded-br-md px-2 py-1">
          B1
        </div>
        <div class="absolute right-0 top-0 text-gray-500 text-xs font-medium rounded-bl-md rounded-tr-md px-2 py-1">
          125
        </div>
        <div class="items-center justify-center">
          <div class="truncate text-center text-4xl mb-4">🤔</div>
          <div class="truncate ... text-center text-lg text-gray-600 font-medium">thoughtful</div>

        </div>
      </div>
    </a>
  </div>

  <div class="flex-none w-64 mb-4">
    <a href="https://fragmentio.com/english-english/on_the_fly">
      <div class="relative bg-gradient-to-br bg-white border-2 border-gray-500 p-4 rounded-lg shadow-md text-amber-900 h-full">
        <div class="absolute left-0 top-0 bg-gray-500 text-gray-50 text-sm font-medium rounded-tl-md rounded-br-md px-2 py-1">
          B1
        </div>
        <div class="absolute right-0 top-0 text-gray-500 text-xs font-medium rounded-bl-md rounded-tr-md px-2 py-1">
          45
        </div>
        <div class="items-center justify-center">
          <div class="truncate text-center text-4xl mb-4">🛫</div>
          <div class="truncate ... text-center text-lg text-gray-600 font-medium">on the fly</div>

        </div>
      </div>
    </a>
  </div>
</div>