Html Question posted in
Some basic documentation can be found here.

Html – How to get child div fill the whole available space, when parent is defined as `mx-auto` with Vue and tailwind

I apologize if this is something very simple and obvious, new to Vue/tailwind.

I have a parent template like this:

<template>
  <div class="mx-auto mt-4 max-w-3xl">
    <slot></slot>
  </div>
</template>

There are items above and below this template.
Then one of the uses of this template adds a child in the slot, like this:

<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 intention is that

  • The child (green panel) would take the available free space on the screen
  • But it should not create a scroll
  • Ideally I don’t want to change the parent template, as it’s used in many places.

But instead with h-full I get a small frame:

enter image description here

I tried other options, like h-screen too, but they don’t create the desired effect. So how can I express the height here. The desired state is:

enter image description here

(i.e. takes all the space available, and does not create a scroll)

Tags:

2

Answers


  1. 0

    The reason that your child is not getting h-full is because your parent also does not have an h-full property. Considering you can not modify the style for the parent template, you can achieve this by having a container outside the parent with the full height, and adding a property to the outer container to order all its immediate children to have the height of the parent.

    Let me break down it to simple HTML:

    <!-- Container -->
<div class="h-full overflow-auto [&>*]:h-full bg-blue-600">
  <!-- Parent can't be modified-->
  <div class="mx-auto mt-2 max-w-3xl">
  <!-- Child -->
    <div class="inline-flex h-full w-full items-center justify-center bg-green-500 px-6 py-6">
       This is the texts
    </div>
  </div>
</div>

    Live Implementation: https://play.tailwindcss.com/pOfeGcaeSG.

    Here, [&>*]:h-full implies to give full height to all the immediate children.

    Fixing the scrollbar: The reason scrollbar will occur is that when we set the parent height to 100% the container’s height, this height does not include the margin of the parent. The only easy workaround I found is to change mt-2 to pt-2 in the parent (if you can).

    Also, do ensure that the container div is taking the whole height. If not, do add height: 100% to HTML and body:

    html, body{
  height: 100%;
}

    P.S. Using h-screen might seem like an easy solution to make an element fill the entire viewport, but it’s not always the best approach, especially when dealing with complex nested layouts. h-screen restricts you to only take the height of the viewport.

    Login or Signup to reply.
  2. 0

    With the information I have from the code you posted it seems like setting the parent element to h-screen creates overflow because of the margin created by your mt-4 class, which the 100vh of h-screen do not account for.
    By swapping margin for padding you should be able to get the result you wanted.
    I’ve setup this tailwind play as a working example you can refer to.

    Hope this helps.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search