DEVHIDE
Login Or Sign up

How in tailwind css set a minimal height for empty div with specified text-4xl size

103 Views Asked by At

I need something like min-h-4xl so when context of the div is empty it will still be same height as other divs with the text. So when there is no emoji (text) i need to keep same size.

Learn languages

https://fragmentio.com/english-english/in_the_long_run Here we use same size block to show phrases that are hard to pronounce in different languages and sometime there is missing translation or the emoji.

I don't want to hardcode min-h-size like this min-h-24, because later i can easily forget to change it, and change defaults for text sizes. And I don't want to show some hidden text in this block.

web text tailwind-css height translation
Original Q&A
1

There are 1 best solutions below

0
Wongjn On

The immediate children of the flex layout are already equal height. Thus you should be able to take advantage of this and apply height: 100% to the element that draws the border to have the elements be of visually the same height:

<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>

Related Questions in WEB

Related Questions in TEXT

Related Questions in TAILWIND-CSS

Related Questions in HEIGHT

Related Questions in TRANSLATION

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json

Popular Questions

.

Copyright © 2021 Jogjafile Inc.