如何使下面的div元素(请参阅代码中的注释(达到全高，同时保留填充？
我希望元素是全高的，而不是在屏幕上，并保持其他元素的填充。
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="tailwind.css">
<title>Survey</title>
</head>
<body class="p-5 bg-gray-50 space-y-5">
<div class="bg-white p-5 rounded-lg border space-y-3">
<p>Lorem Ipsum dolor at...</p>
<div class="border"></div> <!-- This element -->
</div>
</body>
</html>可以在父元素上使用flex flex-col，在子上使用flex-grow
<body class="p-5 bg-gray-50 space-y-5 min-h-screen flex flex-col">
<div class="bg-white p-5 rounded-lg border space-y-3 flex-grow flex flex-col">
<p>Lorem Ipsum dolor at... </p>
<div class="border flex bg-gray-100 flex-grow"></div>
<!-- This element -->
</div>
</body>
在这里演示-尝试更改填充，添加更多文本
将元素设置为容器，并设置元素的高度和填充。但要确保容器的高度应该是填充+元素的高度
请使用min-hscreen类，您可以删除bg-gray-100
<body class="p-5 bg-gray-50 space-y-5">
<div class="bg-white p-5 rounded-lg border space-y-3">
<p>Lorem Ipsum dolor at...</p>
<div class="border flex min-h-screen bg-gray-100"></div>
<!-- This element -->
</div>
</body>
检查顺风游乐场https://play.tailwindcss.com/vAWw54u3oW