CODEWITHSUNDEEP
csstailwind-css
justjoelaw
justjoelaw

Reputation: 51

In Tailwind, how do I fill the remaining space of the parent without overflowing?

I am using Tailwind CSS to style my React app. I am having trouble dealing with text which overflows from a flex container.

For simplicity, I have divided my screen into 4 quadrants.

In Quadrant 4, my "Lorem Ipsum" text overflows it's container. The Q4 container gets it's own scrollbar as expected (Image 1).

My issue is that the entire app also gets a scrollbar. Furthermore, the Q4 container overflows the "flex-col" element (Image 2).

My understanding (which must be incorrect), is that because my parent element uses className='h-screen', and because the children use className='h-full' (i.e. 100% of the parent), no container should overflow the screen size.

This is my code with the Lorem ipsum text truncated:

import React from 'react';

const exampleText = `Lorem ipsum dolor sit amet...`;

const Test = () => {
  return (
    <div className='h-screen'>
      <div id='flex-col' className='flex flex-col border-2 border-slate-600 h-full'>
        <div id='row1' className='flex flex-row border-2 border-red-600'>
          <div id='q1' className='basis-1/2 border-2 border-blue-500'>
            Q1
          </div>
          <div id='q2' className='basis-1/2 border-2 border-blue-500'>
            Q2
          </div>
        </div>
        <div id='row2' className='flex flex-row border-2 border-red-600 h-full'>
          <div id='q3' className='basis-1/2 border-2 border-blue-500'>
            Q3
          </div>
          <div id='q4' className='h-full basis-1/2 border-2 border-blue-500'>
            <div className='h-full overflow-auto'>{exampleText}</div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Test;

Image 1: Image 1 Image 2:

Image 2

Upvotes: 1

Views: 18222

Answers (2)

Code on the Rocks
Code on the Rocks

Reputation: 17764

  1. Set your outer div to take up the full vertical space (h-full)
  2. Make the outer div a flex and flex-col
  3. Set the component you want to expand to grow

<div className="flex flex-row bg-stone-700 rounded-md p-2 h-full">
        <div className="flex flex-col flex-1 space-y-2">
          <div className="flex flex-row flex-none gap-2">
            <input
              className="bg-stone-300 text-stone-800 placeholder-stone-600 p-3 w-full rounded-md"
              title="Description"
              type="text"
              placeholder="Description..."
            ></input>
            <input
              className="bg-stone-300 text-stone-800 placeholder-stone-600 p-3 w-full rounded-md"
              title="Prefix"
              type="text"
              placeholder="Prefix..."
            ></input>
          </div>
          <div className="grow">
            <textarea
              className="bg-stone-300 text-stone-800 placeholder-stone-600 p-3 h-full w-full text-start align-text-top rounded-md mb-auto"
              title="Description"
              placeholder="Description..."
            ></textarea>
          </div>
        </div>
      </div>

enter image description here

Upvotes: 0

Wongjn
Wongjn

Reputation: 24263

Consider removing height: 100% (h-full) from #row2. This is making the height of #row2 effectively height: 100vh after "inheriting" down the height 100% from its parents. Since there is an element before it, this would mean that the overall height of #row1 + #row2 would be more than the 100vh, hence the document scroll.

Apply flex-grow: 1 via grow to #row2 so that it fills the "leftover" height of the flex layout.

Apply min-height: 0 via min-h-0 to #row2 to override the implicit min-height: min-content so it does grow in height beyond the container.

<script src="https://cdn.tailwindcss.com/3.3.2"></script>

<div class='h-screen'>
  <div id='flex-col' class='flex flex-col border-2 border-slate-600 h-full'>
    <div id='row1' class='flex flex-row border-2 border-red-600'>
      <div id='q1' class='basis-1/2 border-2 border-blue-500'>
        Q1
      </div>
      <div id='q2' class='basis-1/2 border-2 border-blue-500'>
        Q2
      </div>
    </div>
    <div id='row2' class='flex flex-row border-2 border-red-600 grow min-h-0'>
      <div id='q3' class='basis-1/2 border-2 border-blue-500'>
        Q3
      </div>
      <div id='q4' class='basis-1/2 border-2 border-blue-500 h-full'>
        <div class='h-full overflow-auto'>
          Lorem ipsum dolor sit amet...
          <div class="h-[200vh]"></div>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 5

Related Questions