Sorry if this seems like a basic question, I'm still getting the hang of Vue and tailwind.
In my parent template, it looks like this:
<template>
<div class="mx-auto mt-4 max-w-3xl">
<slot></slot>
</div>
</template>
Above and below this template, there are other elements.
One way this template is used is by adding a child in the slot, like so:
<div class="inline-flex h-full w-full items-center justify-center bg-green-500 px-6 py-6">
This is the text
</div>
The goal here is:
- The child (green panel) should take up all available free space on the screen
- It shouldn't cause a scroll to appear
- Ideally, I don't want to modify the parent template since it's used in various places
However, using h-full creates a small frame instead:
https://i.sstatic.net/AWv2y.png
I've also tried using h-screen, but that didn't achieve the desired effect either. How can I set the height here to get the desired outcome, like this:
https://i.sstatic.net/GakBy.png
(taking up all available space without causing a scroll)