title: Fix the height for child (Tailwind)
body: <p>I'm trying to vertical center the form into my app.</p>
  <p>Into tailwind.config.js , I've set the h-screen to 100vh (without header and footer height) :</p>
  <pre class="lang-js prettyprint-override"><code>module.exports = {
      purge: [],
      theme: {
          minHeight: {
              screen: 'calc(100vh - 296px)',
          },
          fontFamily: {
              title: ['Righteous', 'sans-serif'],
              body: ['Montserrat', 'sans-serif'],
          },
      },
      variants: {},
      plugins: [],
  }
  </code></pre>
  <p>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.</p>
  <p>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</p>
  <p>Screens here :
  <a href="https://imgur.com/a/dT2nW7B" rel="nofollow noreferrer">https://imgur.com/a/dT2nW7B</a></p>
  <p>Edit (html code):</p>
  <pre><code>&lt;section class=&quot;container mx-auto h-full px-6 p-10&quot;&gt;
      &lt;div class=&quot;flex items-center flex-wrap&quot;&gt;
          &lt;div class=&quot;w-full md:w-1/2&quot;&gt;
              &lt;img src=&quot;images/illustrations/contact.svg&quot; alt=&quot;Reporting&quot; /&gt;
          &lt;/div&gt;
  
          &lt;div class=&quot;w-full md:w-1/2 pl-10&quot;&gt;
              &lt;form class=&quot;w-full max-w-lg&quot;&gt;
                  &lt;div class=&quot;flex flex-wrap -mx-3 mb-6&quot;&gt;
                      &lt;div class=&quot;w-full md:w-1/2 px-3 mb-6 md:mb-0&quot;&gt;
                          &lt;label class=&quot;block uppercase tracking-wide font-bold mb-2&quot; for=&quot;grid-first-name&quot;&gt;
                              Prénom
                          &lt;/label&gt;
                          &lt;input
                              class=&quot;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&quot;
                              id=&quot;grid-first-name&quot; type=&quot;text&quot; placeholder=&quot;Jack&quot;&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;w-full md:w-1/2 px-3&quot;&gt;
                          &lt;label class=&quot;block uppercase tracking-wide font-bold mb-2&quot; for=&quot;grid-last-name&quot;&gt;
                              Nom
                          &lt;/label&gt;
                          &lt;input
                              class=&quot;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&quot;
                              id=&quot;grid-last-name&quot; type=&quot;text&quot; placeholder=&quot;Pot&quot;&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;flex flex-wrap -mx-3 mb-6&quot;&gt;
                      &lt;div class=&quot;w-full px-3&quot;&gt;
                          &lt;label class=&quot;block uppercase tracking-wide font-bold mb-2&quot; for=&quot;grid-password&quot;&gt;
                              E-mail
                          &lt;/label&gt;
                          &lt;input
                              class=&quot;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&quot;
                              id=&quot;email&quot; type=&quot;email&quot; placeholder=&quot;jackpot@exemple.fr&quot;&gt;
                          &lt;p class=&quot;text-gray-600 text-xs italic&quot;&gt;Some tips - as long as needed&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;flex flex-wrap -mx-3 mb-6&quot;&gt;
                      &lt;div class=&quot;w-full px-3&quot;&gt;
                          &lt;label class=&quot;block uppercase tracking-wide font-bold mb-2&quot; for=&quot;grid-password&quot;&gt;
                              Message
                          &lt;/label&gt;
                          &lt;textarea
                              class=&quot; 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&quot;
                              id=&quot;message&quot; placeholder=&quot;Je vous contacte pour ...&quot;&gt;&lt;/textarea&gt;
                          &lt;p class=&quot;text-gray-600 text-xs italic&quot;&gt;Re-size can be disabled by set by resize-none / resize-y
                              /
                              resize-x
                              / resize&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;md:flex md:items-center&quot;&gt;
                      &lt;div class=&quot;md:w-1/3&quot;&gt;
                          &lt;button
                              class=&quot;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&quot;
                              type=&quot;button&quot;&gt;
                              Envoyer
                          &lt;/button&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;md:w-2/3&quot;&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  <p>this code extends (laravel blade) this layout :</p>
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;{{ str_replace('_', '-', app()-&gt;getLocale()) }}&quot;&gt;
  
  &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  
      &lt;title&gt;Dico des Mots&lt;/title&gt;
  
      &lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;180x180&quot; href=&quot;favicon/apple-touch-icon.png&quot;&gt;
      &lt;link rel=&quot;icon&quot; type=&quot;image/png&quot; sizes=&quot;32x32&quot; href=&quot;favicon/favicon-32x32.png&quot;&gt;
      &lt;link rel=&quot;icon&quot; type=&quot;image/png&quot; sizes=&quot;16x16&quot; href=&quot;favicon/favicon-16x16.png&quot;&gt;
      &lt;link rel=&quot;manifest&quot; href=&quot;/site.webmanifest&quot;&gt;
  
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/app.css&quot;&gt;
  
      &lt;!-- Fonts --&gt;
      &lt;link href=&quot;https://fonts.googleapis.com/css?family=Nunito:200,600&quot; rel=&quot;stylesheet&quot;&gt;
      &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Righteous&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
  
  &lt;/head&gt;
  
  &lt;body class=&quot;font-body&quot;&gt;
      @include('components.navbar')
  
      &lt;main id=&quot;app&quot; class=&quot;min-h-screen&quot;&gt;
          @yield('content')
      &lt;/main&gt;
  
      @include('components.footer')
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>