Webmasters Gallery

“Data Loss” is a funny term. My brain thinks of like packet loss on the way from the server to your browser, resulting in missing content in files. Perhaps it is that on some level, but in CSS parlance, it has to do with the overflow property. Too much content for sized container + hidden overflow = data loss.

But it isn’t only overflow that can cause this “data loss.” Alignment can cause data loss too. Imagine flexbox or grid with some alignment that causes content to be pushed off the top or left edges of the screen, where scrollbars do not venture.

Rachel Andrew:

To prevent accidental data loss caused by alignment, CSS now has some new keywords which can be used along with the alignment properties. These are specified in the Box Alignment specification — the specification which deals with alignment across all layout methods including Grid and Flexbox. They are currently only supported in Firefox. In our example above, if we set align-items: safe center, then the final item would become aligned to start rather than forcing the content to be centered. This would prevent the data loss caused by the item being centered and therefore pushed off the side of the viewport.

Direct Link to Article — Permalink

The post Overflow And Data Loss In CSS appeared first on CSS-Tricks.