CODEWITHSUNDEEP
htmlcsstailwind-css
oliverbj
oliverbj

Reputation: 6052

TailwindCSS - Fixed div full width of flex parent

I have the below template created by using TailwindCSS:

<body class="h-full">
  <div class="flex h-full">
    <div class="w-5/6">
      <div class="grid grid-rows-2 grid-flow-col h-full" style="grid-template-rows: 93.8% 6.2%;">
        <div class="relative bg-gray-200 h-full">1</div>
        <div class="bg-red-200">

            <!-- This area is where I have problems -->
            <div class="flex h-full">
              <div class="w-1/2 h-full">
                <div class="bg-blue-500 h-full fixed" style="width: inherit;">Link #1</div>
              </div>
              <div class="w-1/2 h-full">
                <div class="bg-green-500 h-full fixed" style="width: inherit;">Link #2</div>
              </div>
            </div>

        </div>
      </div>
    </div>
    <div class="w-1/6">
    <div class="grid grid-rows-2 grid-flow-col h-full" style="grid-template-rows: 20% 80%;">
                <div class="md:py-16 md:px-4 border-l border-gray-100 bg-gray-50">3
                </div>
                <div class="md:py-4 md:px-4 border-l border-t border-gray-100">4</div>
          </div>
    </div>
  </div>
</body>

Please see the following fiddle I have created here.

The problem I have is with these two divs:

<div class="flex h-full">
    <div class="w-1/2 h-full">
         <div class="bg-blue-500 h-full fixed" style="width: inherit;">Link #1</div>
    </div>
    <div class="w-1/2 h-full">
         <div class="bg-green-500 h-full fixed" style="width: inherit;">Link #2</div>
   </div>
</div>

I want to have two links at the bottom (Link #1 and Link #2 in my example), that have a fixed position. Each link's width should occupy 50% of the parent div.

As you can see in the example posted above, the width of the two bottoms <div> exceeds that of the parent (#1).

enter image description here

Upvotes: 3

Views: 13741

Answers (1)

UXCODA
UXCODA

Reputation: 1226

Im not sure if this is exactly what you wanted but have a look.

I think part of the issue is flexbox wont be able to control the fixed positioned items. The width needed adjusting too. Also you should rather fix the position of the container than each individual link.

You can use something like this but fixed elements usually sit outside of these container because fixing takes it out of the page flow.

https://play.tailwindcss.com/YPc9nuhM9z

Upvotes: 2

Related Questions