Checkbox (and Radio Button) cause an unexpected overflow/scrollbar

[jouni]

Description

When a Checkbox or a Radio Button is the last component inside a scrolling container, they can cause an unwanted/unnecessary scrollbar when none would be needed. This doesn't happen with the default sizing of the component, but if you increase the size, it becomes an issue.

Default size:

--vaadin-checkbox-size: 60px;

Expected outcome

No layout overflow and no scrollbar on the container.

Minimal reproducible example

<style>
  div {
    width: min-content;
    height: min-content;
    outline: auto;
    overflow: auto;
  }

  vaadin-checkbox {
    --vaadin-checkbox-size: 60px;
  }
</style>
<div>
  <vaadin-checkbox label="Checkbox"></vaadin-checkbox>
</div>

Steps to reproduce

Environment

Vaadin 24 prerelease
macOS, Chrome 108

Browsers

No response