One of the most perplexing and befuddling things in CSS for me, for many years, was the behaviour of percentage-based heights. Sometimes, seemingly at random, setting “height: 100%” would have no effect at all. When I finally figured out what was going on, it was like a puzzle piece snapping into place; everything made so much more sense! In this post, I’ll share the epiphany I had, and we’ll explore some solutions.

Josh W. Comeau's platform provides resources in frontend development, React.js, and CSS, offering insightful articles, tutorials, and code examples. With a focus on accessible and creative web development techniques, Josh W. Comeau empowers developers to craft engaging user experiences and solve complex problems in the world of web development.

Josh W Comeau

Josh W. Comeau explores the often confusing behavior of percentage-based heights in CSS, revealing the circular dependency issue when elements try to calculate sizes based on one another. Solutions involve using explicit sizes for parent elements or leveraging CSS layout modes like Flexbox and Grid to resolve height issues while avoiding fixed pixel heights, which affect accessibility. These insights help ensure smoother and more predictable CSS layout designs.

The Height Enigma • Josh W. Comeau

Link to this heading A circular calculation