[Card] Using a <vaadin-icon> in the media slot in combination with the stretch-media or cover-media theme variant results in a broken layout in Firefox

[jouni]

Description

The icon is incorrectly sized and overflows the card boundaries. This only happens in Firefox.

Expected outcome

Minimal reproducible example

<vaadin-card theme="stretch-media">
  <vaadin-icon slot="media" icon="lumo:photo"></vaadin-icon>
  <div>Lapland is the...</div>
</vaadin-card>

Steps to reproduce

• Clone project.
• yarn && npm start.
• Open dev/card.html.
• Choose "Icon" from the Media select.
• Check the "Stretch Media" variant checkbox.

Environment

Vaadin version(s): 24.7 alpha
OS: macOS
Browser: Firefox 135

Browsers

Firefox

[jouni]

The combination of container: size and display: inline-flex on breaks the aspect-ratio in Firefox.