Claude Code Stuck on Vertical Scroll Not Working: Flex Children Need minHeight

#webdev #ai #react #javascript

The Problem

I had a 3-column layout using Flexbox. When the browser window was resized vertically, the content got cut off with no scrollbar appearing.

<div className="flex h-screen overflow-auto">
  <div className="flex-1">Column 1</div>
  <div className="flex-1">Column 2</div>
  <div className="flex-1">Column 3</div>
</div>

Expected: Vertical scrollbar appears when window is too short.

Actual: Content just disappears. No scrollbar. The columns shrink with the window.

Why Claude Code Got Stuck

Claude Code initially thought "the browser can't scroll - maybe this is a browser limitation." The debugging went through several wrong directions:

Adding overflow-y: auto to the container (already had it)
Checking if content was being clipped by overflow: hidden somewhere
Considering it a "browser limitation" for web apps

The real issue was never about overflow settings. It was about what was actually overflowing.

Root Cause Analysis

Flexbox children shrink by default to fit their parent. When you resize the window:

The parent container shrinks (because h-screen follows viewport)
The flex children shrink to fit (default flex-shrink: 1)
Nothing overflows because everything just gets smaller
No overflow = no scrollbar

The container had overflow: auto, but there was nothing overflowing! The children obediently shrank to fit.

Before resize:        After resize:
┌──────────────┐      ┌──────────────┐
│   Content    │      │   Content    │  <- Shrunk, not overflowing!
│   (500px)    │      │   (200px)    │
│              │      └──────────────┘
│              │
└──────────────┘

The Solution

Set a minHeight on the flex children so they can't shrink below a certain size:

const [minColumnHeight, setMinColumnHeight] = React.useState(0);

React.useEffect(() => {
  // Calculate minimum height based on screen
  const screenHeight = window.screen.availHeight;
  const minHeight = screenHeight * 0.5;
  setMinColumnHeight(minHeight);
}, []);

return (
  <div className="flex h-screen overflow-auto">
    <div className="flex-1" style={{ minHeight: minColumnHeight }}>
      Column 1
    </div>
    <div className="flex-1" style={{ minHeight: minColumnHeight }}>
      Column 2
    </div>
    <div className="flex-1" style={{ minHeight: minColumnHeight }}>
      Column 3
    </div>
  </div>
);

Now when the window shrinks:

Parent container shrinks
Children try to shrink but hit minHeight
Children now overflow the parent
Scrollbar appears!

After resize with minHeight:
┌──────────────┐
│   Content    │  <- minHeight prevents shrinking
│   (500px)    │
│──────────────│  <- Scrollable!
│   (hidden)   │
└──────────────┘

Key Takeaways for AI Agents

Claude Code users: if you're hitting this, try:

Remember: overflow: auto only works if something actually overflows
Flex children shrink by default - they won't overflow unless you prevent shrinking
Use minHeight (or minWidth for horizontal) to create a "floor" that forces overflow
Don't assume it's a "browser limitation" - check if your content is even trying to overflow

The mental model:

Scrollbar appears when: content size > container size

Flex default behavior: content size = container size (children shrink to fit)

Fix: content size = max(minHeight, natural size) > container size

Keywords for search:
flex vertical scroll not working, overflow auto no scrollbar, flex children shrink, minHeight scroll, flexbox overflow, content disappears on resize, flex-shrink scroll

This article is part of the "Claude Code Debugging Chronicles" series, documenting real debugging sessions with AI coding assistants.

Related Articles: