diff --git a/apps/vr-tests-react-components/src/stories/Card/Card.stories.tsx b/apps/vr-tests-react-components/src/stories/Card/Card.stories.tsx
index 93952e93137c14..a2432075c1d8cd 100644
--- a/apps/vr-tests-react-components/src/stories/Card/Card.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Card/Card.stories.tsx
@@ -1,12 +1,14 @@
 import * as React from 'react';
 import { Steps, StoryWright } from 'storywright';
 import { Card, CardHeader, CardPreview } from '@fluentui/react-card';
-import { MoreHorizontal24Filled } from '@fluentui/react-icons';
-import { Body1, Caption1 } from '@fluentui/react-text';
+import { MoreHorizontal24Filled, MoreHorizontal20Filled } from '@fluentui/react-icons';
+import { Body1, Caption1, Text } from '@fluentui/react-text';
 import { Button } from '@fluentui/react-button';
-import { powerpointLogoURL, salesPresentationTemplateURL, SampleCardContent } from './utils';
+import { powerpointLogoURL, salesPresentationTemplateURL, SampleCardContent, appLogoUrl } from './utils';
 import { ComponentMeta } from '@storybook/react';
 import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
+import { makeStyles } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
 
 export default {
   title: 'Card Converged',
@@ -94,22 +96,53 @@ export const Size = () => (
 
 Size.storyName = 'size';
 
-export const Orientation = () => (
-  <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-    <div>
-      <h1>Vertical</h1>
-      <Card orientation="vertical">
-        <SampleCardContent />
-      </Card>
-    </div>
-    <div>
-      <h1>Horizontal</h1>
-      <Card orientation="horizontal">
-        <SampleCardContent />
-      </Card>
+const useOrientationStyles = makeStyles({
+  card: {
+    width: '360px',
+    maxWidth: '100%',
+    height: 'fit-content',
+    marginTop: '16px',
+  },
+
+  horizontalCardImage: {
+    width: '64px',
+    height: '64px',
+  },
+
+  caption: {
+    color: tokens.colorNeutralForeground3,
+  },
+});
+
+export const Orientation = () => {
+  const styles = useOrientationStyles();
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+      <div>
+        <h1>Vertical</h1>
+        <Card orientation="vertical">
+          <SampleCardContent />
+        </Card>
+      </div>
+
+      <div>
+        <h1>Horizontal</h1>
+        <Card className={styles.card} orientation="horizontal">
+          <CardPreview className={styles.horizontalCardImage}>
+            <img className={styles.horizontalCardImage} src={appLogoUrl} alt="App Name Document" />
+          </CardPreview>
+
+          <CardHeader
+            header={<Text weight="semibold">App Name</Text>}
+            description={<Caption1 className={styles.caption}>Developer</Caption1>}
+            action={<Button appearance="transparent" icon={<MoreHorizontal20Filled />} aria-label="More options" />}
+          />
+        </Card>
+      </div>
     </div>
-  </div>
-);
+  );
+};
 
 Orientation.storyName = 'orientation';
 
diff --git a/apps/vr-tests-react-components/src/stories/Card/utils.tsx b/apps/vr-tests-react-components/src/stories/Card/utils.tsx
index 6515a3132d02e7..59a4623f0bc156 100644
--- a/apps/vr-tests-react-components/src/stories/Card/utils.tsx
+++ b/apps/vr-tests-react-components/src/stories/Card/utils.tsx
@@ -9,6 +9,7 @@ const ASSET_URL =
 
 export const powerpointLogoURL = ASSET_URL + 'powerpoint_logo.svg';
 export const salesPresentationTemplateURL = ASSET_URL + 'sales_template.png';
+export const appLogoUrl = ASSET_URL + 'app_logo.svg';
 
 export const SampleCardContent = () => (
   <>
diff --git a/change/@fluentui-react-card-d3a28a00-aea5-4225-ad88-d0f90933d2ab.json b/change/@fluentui-react-card-d3a28a00-aea5-4225-ad88-d0f90933d2ab.json
new file mode 100644
index 00000000000000..787c724f845c66
--- /dev/null
+++ b/change/@fluentui-react-card-d3a28a00-aea5-4225-ad88-d0f90933d2ab.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: allow elements of card to grow to fill the available space",
+  "packageName": "@fluentui/react-card",
+  "email": "marcosvmmoura@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-card/src/components/Card/useCardStyles.ts b/packages/react-components/react-card/src/components/Card/useCardStyles.ts
index 1182e63a9e2e79..897cef6d7df0bf 100644
--- a/packages/react-components/react-card/src/components/Card/useCardStyles.ts
+++ b/packages/react-components/react-card/src/components/Card/useCardStyles.ts
@@ -98,6 +98,11 @@ const useStyles = makeStyles({
     [`> :not([aria-hidden="true"]).${cardPreviewClassNames.root}:last-of-type`]: {
       marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,
     },
+
+    // If the last child is a CardHeader or CardFooter, allow it to grow to fill the available space.
+    [`> .${cardHeaderClassNames.root}:last-of-type, > .${cardFooterClassNames.root}:last-of-type`]: {
+      flexGrow: 1,
+    },
   },
   orientationVertical: {
     flexDirection: 'column',