diff --git a/specification/draft/apps.mdx b/specification/draft/apps.mdx
index 6e33f813..51898a12 100644
--- a/specification/draft/apps.mdx
+++ b/specification/draft/apps.mdx
@@ -461,12 +461,20 @@ interface HostContext {
   displayMode?: "inline" | "fullscreen" | "pip";
   /** Display modes the host supports */
   availableDisplayModes?: string[];
-  /** Current and maximum dimensions available to the UI */
+  /** Container dimensions for the iframe. Specify either width or maxWidth, and either height or maxHeight. */
+  containerDimensions?: (
+    | { height: number }      // If specified, container is fixed at this height
+    | { maxHeight?: number }  // Otherwise, container height is determined by the UI height, up to this maximum height (if defined)
+  ) & (
+    | { width: number }       // If specified, container is fixed at this width
+    | { maxWidth?: number }   // Otherwise, container width is determined by the UI width, up to this maximum width (if defined)
+  );
+  /** Host window viewport dimensions */
   viewport?: {
-    width: number;
-    height: number;
-    maxHeight?: number;
-    maxWidth?: number;
+    /** Window viewport width in pixels. */
+    width?: number;
+    /** Window viewport height in pixels. */
+    height?: number;
   };
   /** User's language/region preference (BCP 47, e.g., "en-US") */
   locale?: string;
@@ -516,12 +524,87 @@ Example:
         }
       },
       "displayMode": "inline",
-      "viewport": { "width": 400, "height": 300 }
+      "containerDimensions": { "width": 400, "maxHeight": 600 }
+      "viewport": { "width": 1920, "height": 1080 },
     }
   }
 }
 ```
 
+### Viewport and Dimensions
+
+The `HostContext` provides two separate fields for sizing information:
+
+- **`containerDimensions`**: The dimensions of the container that holds the app. This controls the actual space the app occupies within the host. Each dimension (height and width) operates independently and can be either **fixed** or **flexible**.
+
+- **`viewport`**: The host window's dimensions (e.g., `window.innerWidth` and `window.innerHeight`). Apps can use this to make responsive layout decisions based on the overall screen size.
+
+#### Dimension Modes
+
+| Mode | Dimensions Field | Meaning |
+|------|-----------------|---------|
+| Fixed | `height` or `width` | Host controls the size. App should fill the available space. |
+| Flexible | `maxHeight` or `maxWidth` | App controls the size, up to the specified maximum. |
+| Unbounded | Field omitted | App controls the size with no limit. |
+
+These modes can be combined independently. For example, a host might specify a fixed width but flexible height, allowing the app to grow vertically based on content.
+
+#### App Behavior
+
+Apps should check the containerDimensions configuration and apply appropriate CSS:
+
+```typescript
+// In the app's initialization
+const containerDimensions = hostContext.containerDimensions;
+
+if (containerDimensions) {
+  // Handle height
+  if ("height" in containerDimensions) {
+    // Fixed height: fill the container
+    document.documentElement.style.height = "100vh";
+  } else if ("maxHeight" in containerDimensions && containerDimensions.maxHeight) {
+    // Flexible with max: let content determine size, up to max
+    document.documentElement.style.maxHeight = `${containerDimensions.maxHeight}px`;
+  }
+  // If neither, height is unbounded
+
+  // Handle width
+  if ("width" in containerDimensions) {
+    // Fixed width: fill the container
+    document.documentElement.style.width = "100vw";
+  } else if ("maxWidth" in containerDimensions && containerDimensions.maxWidth) {
+    // Flexible with max: let content determine size, up to max
+    document.documentElement.style.maxWidth = `${containerDimensions.maxWidth}px`;
+  }
+  // If neither, width is unbounded
+}
+
+// Apps can also use viewport for additional data to make responsive layout decisions
+const viewport = hostContext.viewport;
+if (viewport?.width && viewport.width < 768) {
+  // Apply mobile-friendly layout
+}
+```
+
+#### Host Behavior
+
+When using flexible dimensions (no fixed `height` or `width`), hosts MUST listen for `ui/notifications/size-changed` notifications from the app and update the iframe dimensions accordingly:
+
+```typescript
+// Host listens for size changes from the app
+bridge.onsizechange = ({ width, height }) => {
+  // Update iframe to match app's content size
+  if (width != null) {
+    iframe.style.width = `${width}px`;
+  }
+  if (height != null) {
+    iframe.style.height = `${height}px`;
+  }
+};
+```
+
+Apps using the SDK automatically send size-changed notifications via ResizeObserver when `autoResize` is enabled (the default). The notifications are debounced and only sent when dimensions actually change.
+
 ### Theming
 
 Hosts can optionally pass CSS custom properties via `HostContext.styles.variables` for visual cohesion with the host environment.
diff --git a/src/app-bridge.test.ts b/src/app-bridge.test.ts
index 969030fb..ce3a3388 100644
--- a/src/app-bridge.test.ts
+++ b/src/app-bridge.test.ts
@@ -114,6 +114,7 @@ describe("App <-> AppBridge integration", () => {
         theme: "dark" as const,
         locale: "en-US",
         viewport: { width: 800, height: 600 },
+        containerDimensions: { width: 800, maxHeight: 600 },
       };
       const newBridge = new AppBridge(
         createMockClient() as Client,
@@ -338,6 +339,7 @@ describe("App <-> AppBridge integration", () => {
         theme: "light" as const,
         locale: "en-US",
         viewport: { width: 800, height: 600 },
+        containerDimensions: { width: 800, maxHeight: 600 },
       };
       const newBridge = new AppBridge(
         createMockClient() as Client,
@@ -354,20 +356,28 @@ describe("App <-> AppBridge integration", () => {
       newBridge.sendHostContextChange({ theme: "dark" });
       await flush();
 
-      // Send another partial update: only viewport changes
+      // Send another partial update: only viewport and containerDimensions change
       newBridge.sendHostContextChange({
         viewport: { width: 1024, height: 768 },
+        containerDimensions: { width: 1024, maxHeight: 768 },
       });
       await flush();
 
       // getHostContext should have accumulated all updates:
       // - locale from initial (unchanged)
       // - theme from first partial update
-      // - viewport from second partial update
+      // - viewport and containerDimensions from second partial update
       const context = newApp.getHostContext();
       expect(context?.theme).toBe("dark");
       expect(context?.locale).toBe("en-US");
-      expect(context?.viewport).toEqual({ width: 1024, height: 768 });
+      expect(context?.viewport).toEqual({
+        width: 1024,
+        height: 768,
+      });
+      expect(context?.containerDimensions).toEqual({
+        width: 1024,
+        maxHeight: 768,
+      });
 
       await newAppTransport.close();
       await newBridgeTransport.close();
diff --git a/src/app-bridge.ts b/src/app-bridge.ts
index 2c63eaa9..8a06f9e9 100644
--- a/src/app-bridge.ts
+++ b/src/app-bridge.ts
@@ -1008,7 +1008,8 @@ export class AppBridge extends Protocol<
    * ```typescript
    * bridge.setHostContext({
    *   theme: "dark",
-   *   viewport: { width: 800, height: 600 }
+   *   viewport: { width: 800, height: 600 },
+   *   containerDimensions: { maxHeight: 600, width: 800 }
    * });
    * ```
    *
diff --git a/src/generated/schema.json b/src/generated/schema.json
index e8359865..a5eb424a 100644
--- a/src/generated/schema.json
+++ b/src/generated/schema.json
@@ -330,6 +330,10 @@
                         "type": "string",
                         "const": "--color-text-inverse"
                       },
+                      {
+                        "type": "string",
+                        "const": "--color-text-ghost"
+                      },
                       {
                         "type": "string",
                         "const": "--color-text-info"
@@ -628,28 +632,94 @@
                 "type": "string"
               }
             },
+            "containerDimensions": {
+              "description": "Container dimensions. Represents the dimensions of the iframe or other\ncontainer holding the app. Specify either width or maxWidth, and either height or maxHeight.",
+              "allOf": [
+                {
+                  "anyOf": [
+                    {
+                      "type": "object",
+                      "properties": {
+                        "height": {
+                          "description": "Fixed container height in pixels.",
+                          "type": "number"
+                        }
+                      },
+                      "required": ["height"],
+                      "additionalProperties": false
+                    },
+                    {
+                      "type": "object",
+                      "properties": {
+                        "maxHeight": {
+                          "description": "Maximum container height in pixels.",
+                          "anyOf": [
+                            {
+                              "type": "number"
+                            },
+                            {}
+                          ]
+                        }
+                      },
+                      "additionalProperties": false
+                    }
+                  ]
+                },
+                {
+                  "anyOf": [
+                    {
+                      "type": "object",
+                      "properties": {
+                        "width": {
+                          "description": "Fixed container width in pixels.",
+                          "type": "number"
+                        }
+                      },
+                      "required": ["width"],
+                      "additionalProperties": false
+                    },
+                    {
+                      "type": "object",
+                      "properties": {
+                        "maxWidth": {
+                          "description": "Maximum container width in pixels.",
+                          "anyOf": [
+                            {
+                              "type": "number"
+                            },
+                            {}
+                          ]
+                        }
+                      },
+                      "additionalProperties": false
+                    }
+                  ]
+                }
+              ]
+            },
             "viewport": {
-              "description": "Current and maximum dimensions available to the UI.",
+              "description": "Window viewport dimensions. Represents the host window's viewport size,\nwhich provides additional information apps can use to make responsive layout decisions.",
               "type": "object",
               "properties": {
                 "width": {
-                  "description": "Current viewport width in pixels.",
-                  "type": "number"
+                  "description": "Window viewport width in pixels.",
+                  "anyOf": [
+                    {
+                      "type": "number"
+                    },
+                    {}
+                  ]
                 },
                 "height": {
-                  "description": "Current viewport height in pixels.",
-                  "type": "number"
-                },
-                "maxHeight": {
-                  "description": "Maximum available height in pixels (if constrained).",
-                  "type": "number"
-                },
-                "maxWidth": {
-                  "description": "Maximum available width in pixels (if constrained).",
-                  "type": "number"
+                  "description": "Window viewport height in pixels.",
+                  "anyOf": [
+                    {
+                      "type": "number"
+                    },
+                    {}
+                  ]
                 }
               },
-              "required": ["width", "height"],
               "additionalProperties": false
             },
             "locale": {
@@ -956,6 +1026,10 @@
                     "type": "string",
                     "const": "--color-text-inverse"
                   },
+                  {
+                    "type": "string",
+                    "const": "--color-text-ghost"
+                  },
                   {
                     "type": "string",
                     "const": "--color-text-info"
@@ -1254,28 +1328,94 @@
             "type": "string"
           }
         },
+        "containerDimensions": {
+          "description": "Container dimensions. Represents the dimensions of the iframe or other\ncontainer holding the app. Specify either width or maxWidth, and either height or maxHeight.",
+          "allOf": [
+            {
+              "anyOf": [
+                {
+                  "type": "object",
+                  "properties": {
+                    "height": {
+                      "description": "Fixed container height in pixels.",
+                      "type": "number"
+                    }
+                  },
+                  "required": ["height"],
+                  "additionalProperties": false
+                },
+                {
+                  "type": "object",
+                  "properties": {
+                    "maxHeight": {
+                      "description": "Maximum container height in pixels.",
+                      "anyOf": [
+                        {
+                          "type": "number"
+                        },
+                        {}
+                      ]
+                    }
+                  },
+                  "additionalProperties": false
+                }
+              ]
+            },
+            {
+              "anyOf": [
+                {
+                  "type": "object",
+                  "properties": {
+                    "width": {
+                      "description": "Fixed container width in pixels.",
+                      "type": "number"
+                    }
+                  },
+                  "required": ["width"],
+                  "additionalProperties": false
+                },
+                {
+                  "type": "object",
+                  "properties": {
+                    "maxWidth": {
+                      "description": "Maximum container width in pixels.",
+                      "anyOf": [
+                        {
+                          "type": "number"
+                        },
+                        {}
+                      ]
+                    }
+                  },
+                  "additionalProperties": false
+                }
+              ]
+            }
+          ]
+        },
         "viewport": {
-          "description": "Current and maximum dimensions available to the UI.",
+          "description": "Window viewport dimensions. Represents the host window's viewport size,\nwhich provides additional information apps can use to make responsive layout decisions.",
           "type": "object",
           "properties": {
             "width": {
-              "description": "Current viewport width in pixels.",
-              "type": "number"
+              "description": "Window viewport width in pixels.",
+              "anyOf": [
+                {
+                  "type": "number"
+                },
+                {}
+              ]
             },
             "height": {
-              "description": "Current viewport height in pixels.",
-              "type": "number"
-            },
-            "maxHeight": {
-              "description": "Maximum available height in pixels (if constrained).",
-              "type": "number"
-            },
-            "maxWidth": {
-              "description": "Maximum available width in pixels (if constrained).",
-              "type": "number"
+              "description": "Window viewport height in pixels.",
+              "anyOf": [
+                {
+                  "type": "number"
+                },
+                {}
+              ]
             }
           },
-          "required": ["width", "height"],
           "additionalProperties": false
         },
         "locale": {
@@ -1426,6 +1566,10 @@
                 "type": "string",
                 "const": "--color-text-inverse"
               },
+              {
+                "type": "string",
+                "const": "--color-text-ghost"
+              },
               {
                 "type": "string",
                 "const": "--color-text-info"
@@ -2115,6 +2259,10 @@
                         "type": "string",
                         "const": "--color-text-inverse"
                       },
+                      {
+                        "type": "string",
+                        "const": "--color-text-ghost"
+                      },
                       {
                         "type": "string",
                         "const": "--color-text-info"
@@ -2413,28 +2561,94 @@
                 "type": "string"
               }
             },
+            "containerDimensions": {
+              "description": "Container dimensions. Represents the dimensions of the iframe or other\ncontainer holding the app. Specify either width or maxWidth, and either height or maxHeight.",
+              "allOf": [
+                {
+                  "anyOf": [
+                    {
+                      "type": "object",
+                      "properties": {
+                        "height": {
+                          "description": "Fixed container height in pixels.",
+                          "type": "number"
+                        }
+                      },
+                      "required": ["height"],
+                      "additionalProperties": false
+                    },
+                    {
+                      "type": "object",
+                      "properties": {
+                        "maxHeight": {
+                          "description": "Maximum container height in pixels.",
+                          "anyOf": [
+                            {
+                              "type": "number"
+                            },
+                            {}
+                          ]
+                        }
+                      },
+                      "additionalProperties": false
+                    }
+                  ]
+                },
+                {
+                  "anyOf": [
+                    {
+                      "type": "object",
+                      "properties": {
+                        "width": {
+                          "description": "Fixed container width in pixels.",
+                          "type": "number"
+                        }
+                      },
+                      "required": ["width"],
+                      "additionalProperties": false
+                    },
+                    {
+                      "type": "object",
+                      "properties": {
+                        "maxWidth": {
+                          "description": "Maximum container width in pixels.",
+                          "anyOf": [
+                            {
+                              "type": "number"
+                            },
+                            {}
+                          ]
+                        }
+                      },
+                      "additionalProperties": false
+                    }
+                  ]
+                }
+              ]
+            },
             "viewport": {
-              "description": "Current and maximum dimensions available to the UI.",
+              "description": "Window viewport dimensions. Represents the host window's viewport size,\nwhich provides additional information apps can use to make responsive layout decisions.",
               "type": "object",
               "properties": {
                 "width": {
-                  "description": "Current viewport width in pixels.",
-                  "type": "number"
+                  "description": "Window viewport width in pixels.",
+                  "anyOf": [
+                    {
+                      "type": "number"
+                    },
+                    {}
+                  ]
                 },
                 "height": {
-                  "description": "Current viewport height in pixels.",
-                  "type": "number"
-                },
-                "maxHeight": {
-                  "description": "Maximum available height in pixels (if constrained).",
-                  "type": "number"
-                },
-                "maxWidth": {
-                  "description": "Maximum available width in pixels (if constrained).",
-                  "type": "number"
+                  "description": "Window viewport height in pixels.",
+                  "anyOf": [
+                    {
+                      "type": "number"
+                    },
+                    {}
+                  ]
                 }
               },
-              "required": ["width", "height"],
               "additionalProperties": false
             },
             "locale": {
@@ -3210,6 +3424,10 @@
           "type": "string",
           "const": "--color-text-inverse"
         },
+        {
+          "type": "string",
+          "const": "--color-text-ghost"
+        },
         {
           "type": "string",
           "const": "--color-text-info"
@@ -3523,6 +3741,10 @@
             "type": "string",
             "const": "--color-text-inverse"
           },
+          {
+            "type": "string",
+            "const": "--color-text-ghost"
+          },
           {
             "type": "string",
             "const": "--color-text-info"
diff --git a/src/generated/schema.ts b/src/generated/schema.ts
index 9e6120a5..dfaafa51 100644
--- a/src/generated/schema.ts
+++ b/src/generated/schema.ts
@@ -43,6 +43,7 @@ export const McpUiStyleVariableKeySchema = z
     z.literal("--color-text-secondary"),
     z.literal("--color-text-tertiary"),
     z.literal("--color-text-inverse"),
+    z.literal("--color-text-ghost"),
     z.literal("--color-text-info"),
     z.literal("--color-text-danger"),
     z.literal("--color-text-success"),
@@ -563,26 +564,64 @@ export const McpUiHostContextSchema = z
       .array(z.string())
       .optional()
       .describe("Display modes the host supports."),
-    /** @description Current and maximum dimensions available to the UI. */
+    /**
+     * @description Container dimensions. Represents the dimensions of the iframe or other
+     * container holding the app. Specify either width or maxWidth, and either height or maxHeight.
+     */
+    containerDimensions: z
+      .union([
+        z.object({
+          /** @description Fixed container height in pixels. */
+          height: z.number().describe("Fixed container height in pixels."),
+        }),
+        z.object({
+          /** @description Maximum container height in pixels. */
+          maxHeight: z
+            .union([z.number(), z.undefined()])
+            .optional()
+            .describe("Maximum container height in pixels."),
+        }),
+      ])
+      .and(
+        z.union([
+          z.object({
+            /** @description Fixed container width in pixels. */
+            width: z.number().describe("Fixed container width in pixels."),
+          }),
+          z.object({
+            /** @description Maximum container width in pixels. */
+            maxWidth: z
+              .union([z.number(), z.undefined()])
+              .optional()
+              .describe("Maximum container width in pixels."),
+          }),
+        ]),
+      )
+      .optional()
+      .describe(
+        "Container dimensions. Represents the dimensions of the iframe or other\ncontainer holding the app. Specify either width or maxWidth, and either height or maxHeight.",
+      ),
+    /**
+     * @description Window viewport dimensions. Represents the host window's viewport size,
+     * which provides additional information apps can use to make responsive layout decisions.
+     */
     viewport: z
       .object({
-        /** @description Current viewport width in pixels. */
-        width: z.number().describe("Current viewport width in pixels."),
-        /** @description Current viewport height in pixels. */
-        height: z.number().describe("Current viewport height in pixels."),
-        /** @description Maximum available height in pixels (if constrained). */
-        maxHeight: z
-          .number()
+        /** @description Window viewport width in pixels. */
+        width: z
+          .union([z.number(), z.undefined()])
           .optional()
-          .describe("Maximum available height in pixels (if constrained)."),
-        /** @description Maximum available width in pixels (if constrained). */
-        maxWidth: z
-          .number()
+          .describe("Window viewport width in pixels."),
+        /** @description Window viewport height in pixels. */
+        height: z
+          .union([z.number(), z.undefined()])
           .optional()
-          .describe("Maximum available width in pixels (if constrained)."),
+          .describe("Window viewport height in pixels."),
       })
       .optional()
-      .describe("Current and maximum dimensions available to the UI."),
+      .describe(
+        "Window viewport dimensions. Represents the host window's viewport size,\nwhich provides additional information apps can use to make responsive layout decisions.",
+      ),
     /** @description User's language and region preference in BCP 47 format. */
     locale: z
       .string()
diff --git a/src/spec.types.ts b/src/spec.types.ts
index f97a0a6f..57627e78 100644
--- a/src/spec.types.ts
+++ b/src/spec.types.ts
@@ -56,6 +56,7 @@ export type McpUiStyleVariableKey =
   | "--color-text-secondary"
   | "--color-text-tertiary"
   | "--color-text-inverse"
+  | "--color-text-ghost"
   | "--color-text-info"
   | "--color-text-danger"
   | "--color-text-success"
@@ -324,16 +325,39 @@ export interface McpUiHostContext {
   displayMode?: McpUiDisplayMode;
   /** @description Display modes the host supports. */
   availableDisplayModes?: string[];
-  /** @description Current and maximum dimensions available to the UI. */
+  /**
+   * @description Container dimensions. Represents the dimensions of the iframe or other
+   * container holding the app. Specify either width or maxWidth, and either height or maxHeight.
+   */
+  containerDimensions?: (
+    | {
+        /** @description Fixed container height in pixels. */
+        height: number;
+      }
+    | {
+        /** @description Maximum container height in pixels. */
+        maxHeight?: number | undefined;
+      }
+  ) &
+    (
+      | {
+          /** @description Fixed container width in pixels. */
+          width: number;
+        }
+      | {
+          /** @description Maximum container width in pixels. */
+          maxWidth?: number | undefined;
+        }
+    );
+  /**
+   * @description Window viewport dimensions. Represents the host window's viewport size,
+   * which provides additional information apps can use to make responsive layout decisions.
+   */
   viewport?: {
-    /** @description Current viewport width in pixels. */
-    width: number;
-    /** @description Current viewport height in pixels. */
-    height: number;
-    /** @description Maximum available height in pixels (if constrained). */
-    maxHeight?: number;
-    /** @description Maximum available width in pixels (if constrained). */
-    maxWidth?: number;
+    /** @description Window viewport width in pixels. */
+    width?: number | undefined;
+    /** @description Window viewport height in pixels. */
+    height?: number | undefined;
   };
   /** @description User's language and region preference in BCP 47 format. */
   locale?: string;