How to make div fill full height of parent in tailwind

user_501827 0
Viewed 23847

I am using tailwind in my Vuejs app. I have this simple template

<template>
  <div class="bg-gray-500 h-screen">
    <Header /><!-- //height 32 -->
    <div class="w-2/3 mx-auto p-4 text-lg bg-white h-full shadow-lg">
      <router-view />
    </div>
  </div>
</template>

The div with h-screen is the root or my app. The component<header> has a tailwind height of h-32

The problem is that the second div causes the page to scroll at the bottom, the height of the <header> (h-32).

What I want to do

If there is no content, I want the second div to fill the remaining height of the screen but no more. If there is content, I want it grow as necessary.

tailwind-css
1 Answers

You can leverage .flex, .flex-col and .flex-1 for this. Check out docs.

<div class="bg-gray-500 flex flex-col h-screen">
  <div class="flex h-32 bg-gray-200"></div>
  <div class="flex-1 w-2/3 mx-auto p-4 text-lg bg-white h-full shadow-lg bg-gray-300">
    <router-view />
  </div>
</div>
user_53261910
Related