Card component in northstar is styled with height:100%

[hund030]

Environment Information

• Package version(s): "@fluentui/react-northstar": "^0.54.0",
• Browser and OS versions: Microsoft Edge Version 90.0.818.41 (Official build) (64-bit),

Please provide a reproduction of the bug in a codepen:

Actual behavior:

Add below codes in my app the Card component is added a class ea by default, which force the card to keep its height with the browser size.

 <Card aria-roledescription="card with avatar, image and action buttons">
          <Card.Header>
            <Skeleton animation="wave">
              <Flex gap="gap.small">
                <Skeleton.Shape round width="32px" height="32px" />
                <div>
                  <Skeleton.Line width="200px" />
                  <Skeleton.Line width="150px" />
                </div>
              </Flex>
            </Skeleton>
          </Card.Header>
        </Card>

So long it is!

Expected behavior:

Expected it looks like what tutorial shows.

Priorities and help requested:

Are you willing to submit a PR to fix? No

Requested priority: Low
I can workaround by adding extra css to limit the height, but I hope you can fix it if it's a bug.

[gouttierre]

@hund030 - Thank you for the information to the issue you are experiencing.
@kolaps33 - Would you be able to confirm if this is a regression, or if this behavior is an issue?

[axhl]

Any progress on this? I'm experiencing the same height: 100%-issue when using <Card> in 0.56.0 in Chrome. Thank you for investigating.

[msft-fluent-ui-bot]

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.