Skip to content

[card] Setting fixed height on card with overflowing content causes it to break #8479

@web-padawan

Description

@web-padawan

Description

Originally reported at #8233 (review)

Setting fixed height on the vaadin-card with overflowing content causes it to break:

Screenshot 2024-12-19 at 15 03 55

While setting overflow: auto helps with content overflow, the footer would still end up behind the content.

Expected outcome

Expected the content to not overflow.

Minimal reproducible example

<vaadin-card style="max-height: 150px; max-width: 200px;">
  <div>Lapland is the northern-most region of Finland and an active outdoor destination.</div>
  <vaadin-button slot="footer" tabindex="0" role="button">Book Vacation</vaadin-button>
</vaadin-card>

Steps to reproduce

  1. Add the snippet to the HTML page
  2. Ensure footer slot content is present
  3. Observe the overflow

Environment

Vaadin version(s): 24.7

Browsers

Issue is not browser related

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions