Theo's Typesafe Cult•12mo ago

Section tag wont cover the entire container height

<main class="flex-1 bg-gray-800 h-full">
      <section class="bg-gray-800 h-full">
        <div id="test" class="flex justify-between">
          <div class="bg-[#FF0000] w-1/3 m-2">
            <b>Class Selector/Perks</b>
            <div class="flex bg-green-800 h-1/2 w-full"></div>
          </div>
          <div class="bg-[#FF0000] w-1/3 m-2">
           ...
            </div>
          </div>
          <div class="bg-[#FF0000] w-1/3 m-2">
            <span class="p-1 bg-green-800">Details</span>
            <span class="p-1 bg-orange-200">Physical Damage</span>
            <span class="p-1 bg-blue-300">Magical Damage</span>
            <div class="flex bg-green-800 h-full w-full"></div>
          </div>
        </div>
      </section>
    </main>

<main class="flex-1 bg-gray-800 h-full">
      <section class="bg-gray-800 h-full">
        <div id="test" class="flex justify-between">
          <div class="bg-[#FF0000] w-1/3 m-2">
            <b>Class Selector/Perks</b>
            <div class="flex bg-green-800 h-1/2 w-full"></div>
          </div>
          <div class="bg-[#FF0000] w-1/3 m-2">
           ...
            </div>
          </div>
          <div class="bg-[#FF0000] w-1/3 m-2">
            <span class="p-1 bg-green-800">Details</span>
            <span class="p-1 bg-orange-200">Physical Damage</span>
            <span class="p-1 bg-blue-300">Magical Damage</span>
            <div class="flex bg-green-800 h-full w-full"></div>
          </div>
        </div>
      </section>
    </main>

I am trying to create an interface that covers the entire viewport, however the section tag, despite having h-full is only covering about 50%-60% of the total height leaving a large open area at the bottom of the screen. Any ideas what I'm doing wrong that is preventing this element from filling its entire container? Here is the live example showing the issue: https://www.darkalmanac.com/builds

Dark Almanac - The Dark and Darker Build Tool

A tool designed to plan out builds for each class in the game Dark and Darker

2 Replies

Alky•12mo ago

I guess that's because <main/> height is increased by a flex property, so the children can't properly get the adjusted height. Try this changes:

<main class="flex-1 bg-gray-800 align-items-stretch flex">
            <section class="bg-gray-800 w-full flex align-items-stretch">
                <div id="test" class="flex justify-between w-full">

<main class="flex-1 bg-gray-800 align-items-stretch flex">
            <section class="bg-gray-800 w-full flex align-items-stretch">
                <div id="test" class="flex justify-between w-full">

The point is that you need to keep adjusting the height of the children the same way you increased the first parent

MagerXOP•12mo ago

yeah i didnt realize that flex-1 wasnt defining the element as flex it was defining how it flexes in regard to its parent! I figured it ty man

Gaming

Programming

Section tag wont cover the entire container height