I’m working on a React application using TailwindCSS, and I’m having trouble stopping a div that holds a list of tasks from growing vertically beyond the desired height limit. I want the div to take the remaining available height in its parent and enable scrolling for overflow content, but it keeps growing beyond the parent’s height, causing the layout to break.

What I’m Trying to Achieve: I have a dashboard layout with a sidebar (DesktopNavbar) and a main content area. The main content area contains a section with a heading and a grid. The first column of the grid contains a task list div that should:

• Take the remaining height of its parent (after accounting for a heading and some gaps).
• Enable scrolling (overflow-auto) if the content exceeds the available height.
• Not grow beyond the parent’s height.

The parent of the section has a height of 85vh (85% of the viewport height), and I want the layout to be dynamic using percentage-based heights.

The Problem: The task list div is growing vertically beyond the height of its parent, even though I’ve set h-full, flex-1, and overflow-auto on the appropriate elements. This causes the layout to extend beyond the viewport, and no scrollbar appears.

Here’s the relevant code for my layout:

import React from 'react'
import { Outlet } from 'react-router-dom'
import DesktopNavbar from './DesktopNavbar'
import MobileNavbar from './MobileNavbar'

const AppLayout = () => {
  return (
    <div className='h-screen w-screen bg-[#FAF4E5] text-[#3A3329] xl:flex xl:items-center xl:gap-28'>
      <div className='hidden xl:block'><DesktopNavbar /></div>
      <div className='mb-11 xl:hidden'><MobileNavbar /></div>
      <main className='h-[85%] flex-1 pr-8'>
        <Outlet />
      </main>
    </div>
  )
}

export default AppLayout

import React from 'react'
import Task from '../components/Task'

const Dashboard = () => {
  // const days = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb']
  return (
    <section className='flex size-full flex-col gap-14'>
      <h1 className='text-4xl font-bold'>Seu resumo, John Doe.</h1>
      <div className='grid max-h-full flex-1 grid-cols-custom'>
        <div className='flex flex-col gap-5'>
          <h2 className='text-2xl font-medium'>Tarefas de Hoje</h2>
          <div className='flex w-fit flex-1 flex-col gap-3 overflow-hidden rounded-2xl border-[3px] border-[#3A3329] bg-[#EDE7D9] px-4 py-8'>
            {
              Array.from({ length: 4 }).map((_, i) => (
                <Task key={i} />
              ))
            }
          </div>
        </div>
        <div>col 2</div>
      </div>
    </section>
  )
}

export default Dashboard

Using 2 tasks, for example, works just fine

Using more tasks breaks the design

I’m working on a React application using TailwindCSS, and I’m having trouble stopping a div that holds a list of tasks from growing vertically beyond the desired height limit. I want the div to take the remaining available height in its parent and enable scrolling for overflow content, but it keeps growing beyond the parent’s height, causing the layout to break.

What I’m Trying to Achieve: I have a dashboard layout with a sidebar (DesktopNavbar) and a main content area. The main content area contains a section with a heading and a grid. The first column of the grid contains a task list div that should:

• Take the remaining height of its parent (after accounting for a heading and some gaps).
• Enable scrolling (overflow-auto) if the content exceeds the available height.
• Not grow beyond the parent’s height.

The parent of the section has a height of 85vh (85% of the viewport height), and I want the layout to be dynamic using percentage-based heights.

The Problem: The task list div is growing vertically beyond the height of its parent, even though I’ve set h-full, flex-1, and overflow-auto on the appropriate elements. This causes the layout to extend beyond the viewport, and no scrollbar appears.

Here’s the relevant code for my layout:

import React from 'react'
import { Outlet } from 'react-router-dom'
import DesktopNavbar from './DesktopNavbar'
import MobileNavbar from './MobileNavbar'

const AppLayout = () => {
  return (
    <div className='h-screen w-screen bg-[#FAF4E5] text-[#3A3329] xl:flex xl:items-center xl:gap-28'>
      <div className='hidden xl:block'><DesktopNavbar /></div>
      <div className='mb-11 xl:hidden'><MobileNavbar /></div>
      <main className='h-[85%] flex-1 pr-8'>
        <Outlet />
      </main>
    </div>
  )
}

export default AppLayout

import React from 'react'
import Task from '../components/Task'

const Dashboard = () => {
  // const days = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb']
  return (
    <section className='flex size-full flex-col gap-14'>
      <h1 className='text-4xl font-bold'>Seu resumo, John Doe.</h1>
      <div className='grid max-h-full flex-1 grid-cols-custom'>
        <div className='flex flex-col gap-5'>
          <h2 className='text-2xl font-medium'>Tarefas de Hoje</h2>
          <div className='flex w-fit flex-1 flex-col gap-3 overflow-hidden rounded-2xl border-[3px] border-[#3A3329] bg-[#EDE7D9] px-4 py-8'>
            {
              Array.from({ length: 4 }).map((_, i) => (
                <Task key={i} />
              ))
            }
          </div>
        </div>
        <div>col 2</div>
      </div>
    </section>
  )
}

export default Dashboard

Using 2 tasks, for example, works just fine

Using more tasks breaks the design

• reactjs
• flexbox
• tailwind-css
• css-grid

Share Improve this question Follow asked Mar 22 at 0:21 Gustavo HenriqueGustavo Henrique 1111 bronze badge

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

You'd need to apply min-height: 0 to many of the vertical flex children of the task list. The min-height: 0 overrides the default min-height: min-content value that flex children have by default. It is this default that prevents the layout from adhering to the height.

You'd also want to apply overflow-auto not overflow-hidden to allow scrolling.

<div className='grid max-h-full flex-1 grid-cols-custom min-h-0'>
  <div className='flex flex-col gap-5 min-h-0'>
    …
    <div className='flex w-fit flex-1 flex-col gap-3 overflow-auto min-h-0 …'>

<script src="https://unpkg/@tailwindcss/[email protected]"></script>

<div id="app"></div>

<script src="https://unpkg/@babel/[email protected]"></script>
<script type="text/babel" data-type="module">
import React from "https://esm.sh/[email protected]";
import ReactDOM from "https://esm.sh/[email protected]/client";

import { BrowserRouter, Routes, Route, Outlet } from "https://esm.sh/[email protected]";

const DesktopNavbar = () => <div>DesktopNavbar</div>
const MobileNavbar = () => <div>MobileNavbar</div>

const AppLayout = () => {
  return (
    <div className='h-screen w-screen bg-[#FAF4E5] text-[#3A3329] xl:flex xl:items-center xl:gap-28'>
      <div className='hidden xl:block'><DesktopNavbar /></div>
      <div className='mb-11 xl:hidden'><MobileNavbar /></div>
      <main className='h-[85%] flex-1 pr-8'>
        <Outlet />
      </main>
    </div>
  )
}

const Task = () => <div className="min-h-20 w-20 border-2"></div>

const Dashboard = () => {
  // const days = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb']
  return (
    <section className='flex size-full flex-col gap-14'>
      <h1 className='text-4xl font-bold'>Seu resumo, John Doe.</h1>
      <div className='grid max-h-full flex-1 grid-cols-custom min-h-0'>
        <div className='flex flex-col gap-5 min-h-0'>
          <h2 className='text-2xl font-medium'>Tarefas de Hoje</h2>
          <div className='flex w-fit flex-1 flex-col gap-3 overflow-auto min-h-0 rounded-2xl border-[3px] border-[#3A3329] bg-[#EDE7D9] px-4 py-8'>
            {
              Array.from({ length: 4 }).map((_, i) => (
                <Task key={i} />
              ))
            }
          </div>
        </div>
        <div>col 2</div>
      </div>
    </section>
  )
}

ReactDOM.createRoot(document.getElementById('app')).render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<AppLayout />}>
        <Route path="js" element={<Dashboard />} />
      </Route>
    </Routes>
  </BrowserRouter>
);
</script>