Make div fill remaining height of parent div in Tailwind CSS

Question

I want to place the King in the middle of the card, but how do I do that? I tried putting items-center into the second div which didn't work because the second div is just the height of the letter K

<div class="bg-orange-200 w-48 h-48 shadow-md rounded-md hover:shadow-lg mx-10 my -10">
  <div class="flex justify-end p-2">
    <svg>
    </svg>
  </div>
  <div class="bg-slate-200 flex justify-center items-center text-5xl font-bold">
        k
  </div>
</div>

Answer 1

Your question is obviously unclear. Let me provide you with various possibilities to complete your task.

<div class="relative mx-10 my-10 h-48 w-48 rounded-md bg-orange-200 shadow-md hover:shadow-lg">
  <div class="absolute right-0">
    <img class="h-8 w-8" src="https://cdn-icons-png.flaticon.com/512/1214/1214428.png" />
  </div>
  <div class="flex h-full items-center justify-center bg-transparent">
    <div class="h-min w-full bg-slate-200 text-center text-5xl font-bold">k</div>
  </div>
</div>

---

<div class="relative mx-10 my-10 h-48 w-48 rounded-md bg-orange-200 shadow-md hover:shadow-lg">
  <div class="absolute right-0">
    <img class="h-8 w-8" src="https://cdn-icons-png.flaticon.com/512/1214/1214428.png" />
  </div>
  <div class="flex h-full items-center justify-center bg-slate-200 text-5xl font-bold">k</div>
</div>

---

<div class="relative mx-10 my-10 h-48 w-48 rounded-md bg-orange-200 shadow-md hover:shadow-lg">
  <div class="absolute right-0">
    <img class="h-8 w-8" src="https://cdn-icons-png.flaticon.com/512/1214/1214428.png" />
  </div>
  <div class="flex h-full items-center justify-center bg-transparent">
    <div class="flex h-min bg-slate-200 text-5xl font-bold">k</div>
  </div>
</div>

---

---

<div class="mx-10 my-10 flex h-48 w-48 flex-col rounded-md bg-orange-200 shadow-md hover:shadow-lg">
  <div class="flex justify-end p-2">
    <img class="h-8 w-8" src="https://cdn-icons-png.flaticon.com/512/1214/1214428.png" />
  </div>
  <div class="flex h-full flex-1 items-center justify-center bg-slate-200 text-center text-5xl font-bold">k</div>
</div>

---

<div class="mx-10 my-10 flex h-48 w-48 flex-col rounded-md bg-orange-200 shadow-md hover:shadow-lg">
  <div class="flex justify-end p-2">
    <img class="h-8 w-8" src="https://cdn-icons-png.flaticon.com/512/1214/1214428.png" />
  </div>
  <div class="flex h-full flex-1 items-center justify-center bg-transparent"><div class="w-full bg-slate-200 text-center text-5xl font-bold">k</div></div>
</div>

Answer 2

This type of layout is more predictable using a grid. Because flex will try to fill the available space, grid will not.

I gave two examples, one is completely centered regardless of the icon, and the other takes into account the position and size of the icon.

https://play.tailwindcss.com/6M290nY1NT

<!-- this is your example -->
<div class="bg-orange-200 w-48 h-48 shadow-md rounded-md hover:shadow-lg mx-10 my-10">  
  <div class="flex justify-end p-2">
    <svg>
    </svg>
  </div>
  <div class="bg-slate-200 flex justify-center items-center text-5xl font-bold">
        k
  </div>
</div>

<!-- fully centered -->
<div class="grid items-center bg-orange-200 w-48 h-48 shadow-md rounded-md hover:shadow-lg mx-10 my-10">  
  <div class="[grid-area:1/1] self-start justify-self-end h-4 w-4 bg-black">
    <svg>
    </svg>
  </div>
  <div class="[grid-area:1/1] bg-slate-200 flex justify-center items-center text-5xl font-bold">
        k
  </div>
</div>

<!-- kinda centered -->
<div class="grid items-center [grid-template-rows:auto_1fr] bg-orange-200 w-48 h-48 shadow-md rounded-md hover:shadow-lg mx-10 my-10">  
  <div class=" justify-self-end h-4 w-4 bg-black">
    <svg>
    </svg>
  </div>
  <div class=" bg-slate-200 flex justify-center items-center text-5xl font-bold">
        k
  </div>
</div>