flexbox
Technical notes on web development, DevOps, and AI integration.
2 articles
- 10:06frontend
Ditching Manual Height Math at the Bottom of the Page
The taller brand column needed no height math and no JavaScript at all: CSS grid stretch plus one auto margin did the entire job.
TL;DR: While refactoring a site footer, the author nearly wrote JavaScript to measure column heights before realizing CSS grid's default stretch already equalized them. Pinning the company line to the bottom took only flex column plus mt-auto. The lesson: inspect defaults first, since two class names beat any runtime measuring script.
#css#flexbox#tailwind - 22:27frontend
My Sticky Sidebar Failed in Complete Silence
A position sticky sidebar that scrolled away with the page, and the three CSS preconditions I now check before trusting sticky again.
TL;DR: A sticky sidebar in a flex layout failed silently because it broke all three preconditions. Flexbox's default stretch left the aside no scroll room, fixed with items-start, while a fixed header demanded a custom top offset. The author now avoids overflow-clipping ancestors, removed redundant height caps, and made this layout a standard pattern.
#css#tailwind#flexbox