Fix the height for child (Tailwind)

Question

I'm trying to vertical center the form into my app.

Into tailwind.config.js, I've set the h-screen to 100vh (without header and footer height):

module.exports = {
    purge: [],
    theme: {
        minHeight: {
            screen: 'calc(100vh - 296px)',
        },
        fontFamily: {
            title: ['Righteous', 'sans-serif'],
            body: ['Montserrat', 'sans-serif'],
        },
    },
    variants: {},
    plugins: [],
}

It works perfectly, but when I put h-full into my child (to be 100% of parent), the content don't dapat the height to be vertically center.

You can see the code in my screenshots below, the child is set to 100% but don't expend the div.. What is wrong? Thanks

Screens here: https://imgur.com/a/dT2nW7B

Edit (html code):

<section class="container mx-auto h-full px-6 p-10">
    <div class="flex items-center flex-wrap">
        <div class="w-full md:w-1/2">
            <img src="images/illustrations/contact.svg" alt="Reporting" />
        </div>

        <div class="w-full md:w-1/2 pl-10">
            <form class="w-full max-w-lg">
                <div class="flex flex-wrap -mx-3 mb-6">
                    <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
                        <label class="block uppercase tracking-wide font-bold mb-2" for="grid-first-name">
                            Prénom
                        </label>
                        <input
                            class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
                            id="grid-first-name" type="text" placeholder="Jack">
                    </div>
                    <div class="w-full md:w-1/2 px-3">
                        <label class="block uppercase tracking-wide font-bold mb-2" for="grid-last-name">
                            Nom
                        </label>
                        <input
                            class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
                            id="grid-last-name" type="text" placeholder="Pot">
                    </div>
                </div>
                <div class="flex flex-wrap -mx-3 mb-6">
                    <div class="w-full px-3">
                        <label class="block uppercase tracking-wide font-bold mb-2" for="grid-password">
                            E-mail
                        </label>
                        <input
                            class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
                            id="email" type="email" placeholder="jackpot@exemple.fr">
                        <p class="text-gray-600 text-xs italic">Some tips - as long as needed</p>
                    </div>
                </div>
                <div class="flex flex-wrap -mx-3 mb-6">
                    <div class="w-full px-3">
                        <label class="block uppercase tracking-wide font-bold mb-2" for="grid-password">
                            Message
                        </label>
                        <textarea
                            class=" no-resize appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500 h-48 resize-none"
                            id="message" placeholder="Je vous contacte pour ..."></textarea>
                        <p class="text-gray-600 text-xs italic">Re-size can be disabled by set by resize-none / resize-y
                            /
                            resize-x
                            / resize</p>
                    </div>
                </div>
                <div class="md:flex md:items-center">
                    <div class="md:w-1/3">
                        <button
                            class="shadow bg-blue-500 hover:bg-white hover:text-blue-500 rounded-full hover:border-blue-500 border border-blue-500 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded"
                            type="button">
                            Envoyer
                        </button>
                    </div>
                    <div class="md:w-2/3"></div>
                </div>
            </form>
        </div>
    </div>
</section>

this code extends (laravel blade) this layout:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Dico des Mots</title>

    <link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">

    <link rel="stylesheet" type="text/css" href="css/app.css">

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Righteous&display=swap" rel="stylesheet">

</head>

<body class="font-body">
    @include('components.navbar')

    <main id="app" class="min-h-screen">
        @yield('content')
    </main>

    @include('components.footer')
</body>

</html>

Answer 1

You should use h-screen for this. See the working model here jsfiddle

<section class="container mx-auto"> // remove h-full and padding
    <div class="flex items-center h-screen flex-wrap"> // add h-screen

Tip:
h-full is 100% (relative to parent)
h-screen is 100vh (relative to screen)