CSS Data Loss: Why Some “Hung” Elements Vanish
In a left-to-right layout, pushing an element off the right edge of the page with something like position: absolute; right: -100px; will create a horizontal scrollbar so users can scroll to see the whole element. However, doing the same on the left side won’t trigger a scrollbar at all — that part simply remains hidden. CSS terms this “data loss,” and the same behavior applies vertically: content overflowing the top is clipped without a scrollbar, while overflow at the bottom causes scrolling.
Ahmad Shadeed highlights this quirk and describes it using logical properties like inline-start and block-start — sensible terminology because those directions switch when the page’s direction or writing mode changes. On a right-to-left (RTL) page (e.g., <html dir="rtl">), the horizontal edges that lose data are swapped, though Firefox behaves differently in this case.
