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.

9m read timeFrom joshwcomeau.com
Post cover image
Table of contents
Link to this heading A circular calculationLink to this heading Knowable heightsLink to this heading The final bossLink to this heading Continue learning

Sort: