---
schema_version: "1"
id: fe38997242427954074cf2b6c58d5f4f008f650443f418ff40b7e6220f8da06a
title: Resize an Embedded App to Fit Its Content
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/multi-framework/microfrontend/guides/resize-embedded-app.md
canonical_url: https://developer.salesforce.com/docs/platform/microfrontend/guide/resize-embedded-app.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 7814af563097a8e43181877446319bb34f0badf36e90eb1568446ce132d8d93d
products:
  - Salesforce Microfrontend (UI Embedding)
  - multi-framework
---
# Resize an Embedded App to Fit Its Content

Avoid inner scrollbars and clipped content by letting the embedding frame grow and shrink to fit your app. The embedded app reports its size to Salesforce, and Salesforce sizes the iframe to match, so your app renders as if it were a native part of the page.

## How It Works

The embedded app (the guest) reports its height to Salesforce through the embedding protocol. Salesforce applies that height to the iframe. Automatic height reporting is on by default: the embedding resizer starts when your app bootstraps (when you import `@salesforce/platform-sdk/ui-embedding`) and reports the new height as your content changes. There's no SDK method to turn it on or configure it. You can also report a size yourself with the view SDK, which layers on top of the resizer, for example to set an explicit width.

## Prerequisites

- Your app is embedded with `lightning-ui-embedding` and loads successfully.

## Report the Size

To report your app's size directly, call `resize` from the view SDK. Pass the width and height as pixel strings, such as `"480px"`. Pass an empty string for an axis you don't want to change.

```javascript
import "@salesforce/platform-sdk/ui-embedding";
import { createViewSDK } from "@salesforce/platform-sdk/view";

const viewSdk = await createViewSDK();

// Set the height and leave the width unchanged.
await viewSdk.resize?.("", "480px");
```

You don't need to enable automatic height reporting. The embedding resizer runs by default and reports the new height whenever your content changes, so it settles on the right height on its own.

**important:** Avoid full-viewport height styles, such as `height: 100vh` or `min-height: 100vh`, in your embedded app. Inside the iframe, `100vh` resolves to the iframe's own current height, not the height of the full Salesforce page. So a full-viewport height can't grow to fit your content and usually just clips it.

## See Also

- [Get Started with UI Embedding](https://developer.salesforce.com/docs/platform/microfrontend/guide/get-started.md)
- [Style an Embedded App to Match Salesforce](https://developer.salesforce.com/docs/platform/microfrontend/guide/style-embedded-app.md)