Unexpected CSS behavior when using React Aria Checkbox inside a container with combination of max width, auto margin and overflow hidden

[varvay]

I've raised same question in the Stackoverflow. Also I've uploaded an issue replication project in my GitHub. The instruction on starting the web app on local machine documented in the README of the project.

An unexpected behavior on the rendered document where the React Aria Checkbox components resides outside container somehow still took place physically but invisible when it mustn't. Such issue occurred when the container have CSS properties of max-width, margin-left: auto, margin-right: auto and overflow: hidden, and containing overflowing React Aria Checkbox, but not with other component such React Aria TextField. Can someone explain the reason this is happening? is it a bug that should be reported to React Aria maintainer? As for the workaround, I use the React Aria Hooks as it's included in the replication code repo.

Here's the snippet of the container CSS,

.container {
  width: 100vw;
  max-width: 80vw;
  height: 100vh;
  max-height: 100vh;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  background-color: lightsteelblue;
}

Here's the comparison of the rendered page with same CSS properties but containing different component (React Aria Checkbox and TextField),

With Checkbox

With TextField

[varvay]

I'll close the discussion since I've decided to create an issue ticket instead in #7108