A walkthrough of the full-bleed CSS layout technique and its scrollbar-related pitfalls with viewport units. The post covers Andy Bell's classic utility class, the scrollbar gutter problem on Windows, and a modern fix using CSS containment with container query inline units (cqi). It then tackles the nested container problem using @property to register a custom property with explicit inheritance, so the body container size is correctly resolved even inside nested containers. Finally, it references a W3C proposal for named container references in container unit syntax as a future improvement.
68.2K Impressions3 Comments