Tailwind CSS布局问题：子div填父div剩余高度及卡片内K居中

1. 让div填充父div的剩余高度 #

通过Flex布局即可实现：

• 给父容器添加 flex flex-col 类，将其设置为垂直方向的Flex容器
• 给需要填充剩余高度的子div添加 flex-1 类，该元素会自动占据父容器中除其他子元素外的所有剩余空间

示例代码：

<div class="h-64 bg-gray-100 flex flex-col">
  <div class="h-16 bg-blue-200">顶部固定高度区域</div>
  <div class="flex-1 bg-green-200">填充剩余高度的区域</div>
</div>

2. 让卡片内的字母K在卡片居中 #

问题核心是包含K的div未占据卡片的剩余高度，导致垂直居中失效。修改方案：

• 给卡片父容器添加 flex flex-col，将卡片设置为垂直Flex布局
• 给包含K的div添加 flex-1，使其占据卡片除顶部SVG容器外的剩余高度，同时保留flex justify-center items-center实现内容居中

修改后的完整代码：

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

内容的提问来源于stack exchange，提问作者Apoorv pandey