Why does a vertical scrollbar appear when only width exceeds viewport, even with zero height content? [closed]

I've encountered a puzzling CSS layout issue:
a vertical scrollbar appears even when the content has no height, simply because the element's width exceeds the viewport width.

Here's a minimal reproducible example:

Expected behavior:

Only a horizontal scrollbar should appear (if any), since the content width (502px with borders) exceeds the viewport width (e.g., 320px), while the height is effectively 0.

Actual behavior:

Both horizontal and vertical scrollbars appear in browser.

Question:**

Why does a vertical scrollbar appear when only the width exceeds the viewport?
Is this behavior specified in CSS standards, or is it a browser implementation detail?
How can I prevent the vertical scrollbar while keeping the wide element with borders?

Environment:

_ macOS
_ Chrome 142.0.7444.176 with mobile simulation (390x844)