diff --git a/.changeset/proud-pugs-decide.md b/.changeset/proud-pugs-decide.md
new file mode 100644
index 0000000000..084e1710be
--- /dev/null
+++ b/.changeset/proud-pugs-decide.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-uikit/card': minor
+---
+
+Make card content to always use all available vertical space.
diff --git a/.changeset/stale-radios-punch.md b/.changeset/stale-radios-punch.md
new file mode 100644
index 0000000000..368da8c0e9
--- /dev/null
+++ b/.changeset/stale-radios-punch.md
@@ -0,0 +1,8 @@
+---
+'@commercetools-uikit/spacings-inset-squish': minor
+'@commercetools-uikit/spacings-inset': minor
+---
+
+Refactor vertical space usage so consumers can control it.
+
+There's a new property named `height` (available values: `auto` and `100%`; the former is the default) that will allow consumers to control the vertical space usage of the component.
diff --git a/packages/components/card/src/card.tsx b/packages/components/card/src/card.tsx
index f3f024ad69..653e981a3b 100644
--- a/packages/components/card/src/card.tsx
+++ b/packages/components/card/src/card.tsx
@@ -55,7 +55,9 @@ const Card = (props: TCardProps) => (
       // This is mostly useful in case custom styles are targeting this element.
       <div>{props.children}</div>
     ) : (
-      <Inset scale={props.insetScale}>{props.children}</Inset>
+      <Inset scale={props.insetScale} height="100%">
+        {props.children}
+      </Inset>
     )}
   </div>
 );
diff --git a/packages/components/card/src/card.visualroute.jsx b/packages/components/card/src/card.visualroute.jsx
index 290faa2eae..04a7fe3407 100644
--- a/packages/components/card/src/card.visualroute.jsx
+++ b/packages/components/card/src/card.visualroute.jsx
@@ -17,10 +17,11 @@ const WrappedCard = (props) => (
     css={css`
       margin: 16px;
       width: 300px;
+      height: ${props.height || 'auto'};
     `}
     {...props}
   >
-    <Text.Body>{props.children}</Text.Body>
+    {props.children}
   </Card>
 );
 
@@ -28,74 +29,94 @@ export const component = () => (
   <Suite>
     <Spec label="Type - Raised, Theme - Light, InsetScale - None">
       <WrappedCard type="raised" theme="light" insetScale="none">
-        {text}
+        <Text.Body>{text}</Text.Body>
       </WrappedCard>
     </Spec>
     <Spec label="Type - Raised, Theme - Dark, InsetScale - None">
       <WrappedCard type="raised" theme="dark" insetScale="none">
-        {text}
+        <Text.Body>{text}</Text.Body>
       </WrappedCard>
     </Spec>
     <Spec label="Type - Flat, Theme - Light, InsetScale - None">
       <WrappedCard type="flat" theme="light" insetScale="none">
-        {text}
+        <Text.Body>{text}</Text.Body>
       </WrappedCard>
     </Spec>
     <Spec label="Type - Flat, Theme - Dark, InsetScale - None">
       <WrappedCard type="flat" theme="dark" insetScale="none">
-        {text}
+        <Text.Body>{text}</Text.Body>
       </WrappedCard>
     </Spec>
 
     <Spec label="Type - Raised, Theme - Light, InsetScale - S">
       <WrappedCard type="raised" theme="light" insetScale="s">
-        {text}
+        <Text.Body>{text}</Text.Body>
       </WrappedCard>
     </Spec>
     <Spec label="Type - Raised, Theme - Dark, InsetScale - S">
       <WrappedCard type="raised" theme="dark" insetScale="s">
-        {text}
+        <Text.Body>{text}</Text.Body>
       </WrappedCard>
     </Spec>
     <Spec label="Type - Flat, Theme - Light, InsetScale - S">
       <WrappedCard type="flat" theme="light" insetScale="s">
-        {text}
+        <Text.Body>{text}</Text.Body>
       </WrappedCard>
     </Spec>
     <Spec label="Type - Flat, Theme - Dark, InsetScale - S">
       <WrappedCard type="flat" theme="dark" insetScale="s">
-        {text}
+        <Text.Body>{text}</Text.Body>
       </WrappedCard>
     </Spec>
 
     <Spec label="Type - Raised, Theme - Light, InsetScale - M">
       <WrappedCard type="raised" theme="light" insetScale="m">
-        {text}
+        <Text.Body>{text}</Text.Body>
       </WrappedCard>
     </Spec>
     <Spec label="Type - Raised, Theme - Dark, InsetScale - M">
       <WrappedCard type="raised" theme="dark" insetScale="m">
-        {text}
+        <Text.Body>{text}</Text.Body>
       </WrappedCard>
     </Spec>
     <Spec label="Type - Flat, Theme - Light, InsetScale - M">
       <WrappedCard type="flat" theme="light" insetScale="m">
-        {text}
+        <Text.Body>{text}</Text.Body>
       </WrappedCard>
     </Spec>
     <Spec label="Type - Flat, Theme - Dark, InsetScale - M">
       <WrappedCard type="flat" theme="dark" insetScale="m">
-        {text}
+        <Text.Body>{text}</Text.Body>
       </WrappedCard>
     </Spec>
     <Spec label="Type - Raised, Theme - Light, InsetScale - L">
       <WrappedCard type="raised" theme="light" insetScale="l">
-        {text}
+        <Text.Body>{text}</Text.Body>
       </WrappedCard>
     </Spec>
     <Spec label="Type - Raised, Theme - Light, InsetScale - XL">
       <WrappedCard type="raised" theme="light" insetScale="xl">
-        {text}
+        <Text.Body>{text}</Text.Body>
+      </WrappedCard>
+    </Spec>
+
+    <Spec label="Content using all vertical space from the parent">
+      <WrappedCard type="raised" theme="light" insetScale="m" height="400px">
+        <div
+          css={css`
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            height: 100%;
+          `}
+        >
+          <div>
+            {text}
+          </div>
+          <div>
+            {text}
+          </div>
+        </div>
       </WrappedCard>
     </Spec>
   </Suite>
diff --git a/packages/components/spacings/spacings-inset-squish/README.md b/packages/components/spacings/spacings-inset-squish/README.md
index de8ecb3425..89df6c164a 100644
--- a/packages/components/spacings/spacings-inset-squish/README.md
+++ b/packages/components/spacings/spacings-inset-squish/README.md
@@ -39,6 +39,7 @@ import Spacings from '@commercetools-uikit/spacings';
 | Props      | Type             | Required | Values            | Default |
 | ---------- | ---------------- | :------: | ----------------- | ------- |
 | `scale`    | `String`         |    -     | `['s', 'm', 'l']` | `m`     |
+| `height`   | `String`         |    -     | `auto`, `100%`    | `auto`  |
 | `children` | `PropTypes.node` |    -     | -                 | -       |
 
 ## Scales
diff --git a/packages/components/spacings/spacings-inset-squish/src/inset-squish.tsx b/packages/components/spacings/spacings-inset-squish/src/inset-squish.tsx
index 7df7672e68..3ee99fd59f 100644
--- a/packages/components/spacings/spacings-inset-squish/src/inset-squish.tsx
+++ b/packages/components/spacings/spacings-inset-squish/src/inset-squish.tsx
@@ -6,6 +6,7 @@ import { filterDataAttributes } from '@commercetools-uikit/utils';
 export type TScale = 's' | 'm' | 'l';
 export type TInsetSquishProps = {
   scale: TScale;
+  height: 'auto' | '100%';
   children: ReactNode;
 };
 
@@ -26,15 +27,16 @@ const InsetSquish = (props: TInsetSquishProps) => (
   <div
     css={css`
       padding: ${getPadding(props.scale)};
-      height: 100%;
+      height: ${props.height};
     `}
     {...filterDataAttributes(props)}
   >
     {props.children}
   </div>
 );
-const defaultProps: Pick<TInsetSquishProps, 'scale'> = {
+const defaultProps: Pick<TInsetSquishProps, 'scale' | 'height'> = {
   scale: 'm',
+  height: 'auto',
 };
 InsetSquish.displayName = 'InsetSquish';
 InsetSquish.defaultProps = defaultProps;
diff --git a/packages/components/spacings/spacings-inset/README.md b/packages/components/spacings/spacings-inset/README.md
index 9897477fe6..5c207de382 100644
--- a/packages/components/spacings/spacings-inset/README.md
+++ b/packages/components/spacings/spacings-inset/README.md
@@ -29,6 +29,7 @@ import Spacings from '@commercetools-uikit/spacings';
 | Props      | Type             | Required | Values                        | Default |
 | ---------- | ---------------- | :------: | ----------------------------- | ------- |
 | `scale`    | `String`         |    -     | `['xs', 's', 'm', 'l', 'xl']` | `x`     |
+| `height`   | `String`         |    -     | `auto`, `100%`                | `auto`  |
 | `children` | `PropTypes.node` |    -     | -                             | -       |
 
 ## Scales
diff --git a/packages/components/spacings/spacings-inset/src/inset.tsx b/packages/components/spacings/spacings-inset/src/inset.tsx
index 17054f7c3c..457766d27a 100644
--- a/packages/components/spacings/spacings-inset/src/inset.tsx
+++ b/packages/components/spacings/spacings-inset/src/inset.tsx
@@ -24,6 +24,7 @@ const getPadding = (scale?: TScale) => {
 
 export type TInsetProps = {
   scale: TScale;
+  height: 'auto' | '100%';
   children?: ReactNode;
 };
 
@@ -31,15 +32,16 @@ const Inset = (props: TInsetProps) => (
   <div
     css={css`
       padding: ${getPadding(props.scale)};
-      height: 100%;
+      height: ${props.height};
     `}
     {...filterDataAttributes(props)}
   >
     {props.children}
   </div>
 );
-const defaultProps: Pick<TInsetProps, 'scale'> = {
+const defaultProps: Pick<TInsetProps, 'scale' | 'height'> = {
   scale: 'm',
+  height: 'auto',
 };
 Inset.displayName = 'Inset';
 Inset.defaultProps = defaultProps;