Why doesn't the scroll bar appear even if it protrudes to the left?

Question

I created this code. This overflows to the right, which causes a scrollbar to appear:

.content {
  position: absolute;
  height: 100px;
  width: 100px;
  right: -50px;
  top: 50px;
}

<div class="content">
  CONTENT
</div>

---

However, this code, which extends to the left, did not generate scrollbars. I interpreted from the W3C specification that this would create scrollbars in both directions.

The overflow-x property specifies the handling of overflow in the horizontal direction (i.e., overflow from the left and right sides of the box), and the overflow-y property specifies the handling of overflow in the vertical direction (i.e., overflow from the top and bottom sides of the box).

^{https://www.w3.org/TR/css-overflow-3/}

.content {
  position: absolute;
  height: 100px;
  width: 100px;
  left: -50px;
  top: 50px;
}

<div class="content">
  CONTENT
</div>

Does the W3C specification explain why scrollbars are not generated when projecting to the left?

Answer 1

It's this paragraph from section 3.3. Scrolling Origin, Direction, and Restriction

Due to Web-compatibility constraints (caused by authors exploiting legacy bugs to surreptitiously hide content from visual readers but not search engines and/or speech output), UAs must clip the scrollable overflow region of scroll containers on the block-start and inline-start sides of the box (thereby behaving as if they had no scrollable overflow on that side).

In other words, the overflow notionally happens on both sides. But it is clipped.