I am currently working with tailwind to create a log in form.
The HTML looks like so:
<!DOCTYPE html>
<html style="height: 100%;">
<head>
<title>Test</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css" rel="stylesheet"/>
</head>
<body style="height: 100%; width: 100%;">
<div class="w-full h-full flex flex-col p-5 md:flex-row md:space-x-2">
<div class="w-full h-1/4 flex justify-center items-center md:w-1/2 md:h-full">
</div>
<div class="w-full h-3/4 p-2 md:w-1/2 md:h-full">
<div class="h-10 flex justify-around items-center mb-1 space-x-2">
<a class="h-full w-full">
<div class="flex h-full w-full justify-center items-center text-center text-lg border rounded-lg border-red-900">
<span>Log in</span>
</div>
</a>
<a class="h-full w-full">
<div class="flex h-full w-full justify-center items-center text-center text-lg border rounded-lg border-red-900">
<span class="">Sign up</span>
</div>
</a>
</div>
<div style="height: calc(100% - 2.5rem) !important" class="p-2 border rounded-lg border-red-900 shadow-2xl">
<div class="w-full h-full flex relative">
<form class="w-full h-full">
<div style="height: calc(100% - 2.5rem) !important" class="w-full h-full flex flex-col justify-center overflow-auto">
<div class="w-3/4 my-3 mx-auto flex flex-col justify-center">
<label class="w-full">
<span class="font-mono ml-3">Email</span>
<input class="w-full px-3 border rounded-lg border-red-700 h-8 focus:outline-none focus:ring-1 focus:ring-red-700 focus:z-10" type="text"
placeholder="[email protected]" required autofocus>
</label>
</div>
<div class="w-3/4 my-3 mx-auto flex flex-col justify-center">
<label class="w-full">
<span class="font-mono ml-3">Password</span>
<input class="w-full px-3 border rounded-lg border-red-700 h-8 focus:outline-none focus:ring-1 focus:ring-red-700 focus:z-10" type="password"
placeholder="********" required>
</label>
</div>
<div class="w-3/4 mx-auto text-right text-red-700">
<a>Forgot password?</a>
</div>
</div>
<div class="text-red-700 m-auto h-10 w-3/4 absolute bottom-0 inset-x-0 text-center border rounded-lg">
<button class="font-mono h-full w-full focus:bg-red-700 focus:text-white focus:outline-none focus:ring-0 border rounded-lg border-red-700 hover:bg-red-700 hover:text-white"
type="submit">Log in</button> <!-- [disabled]="!loginForm.valid" -->
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
The problem
As you can see, in the parent div, it contains the class overflow-auto. The issue is that when the overflow is activated, part of the first child is not shown for some reason. When removing the justify-center (also in the parent div) this issue is no longer a problem, however I want the content to be vertically centered.
Please see the following image to get a graphical idea. As the image shows, the scrollbar is at its top limit, however the first child is only partly displayed.
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
