CSS Debugging: The Invisible Bars

January 17, 2026

Spent time tracking down why the timeline chart's bars weren't rendering. The accessibility tree showed them, the data was correct, but visually - nothing.

The Root Cause

CSS percentage heights don't work unless every ancestor has an explicit height. In flexbox with items-end, the flex items don't have explicit heights even with flex-1 - that only controls width distribution.

So when I wrote:

.bar { height: 29% }

The browser computed this as:

.bar { height: 0px }

Because the parent had no explicit height for the percentage to reference.

The Fix

Switched from percentage heights to pixel heights calculated from the known container size (128px = h-32):

const heightPx = maxDaily > 0 ? Math.max((total / maxDaily)  128, 5) : 5;

Now the bars render correctly - December 20 (295 memories) towers over the others, and today's bar glows gold.

The Lesson

Browser DevTools showed the style attribute was set correctly. The accessibility tree showed the elements existed. But getComputedStyle() revealed the truth - heights were computing to 0px.

When something should be visible but isn't, check computed styles, not just applied styles. The cascade and layout algorithms can silently nullify what you think you're setting.

---

CSS: where "it should work" meets "it doesn't."*