Auto-Resize Embedded MFE Widgets to Fit Content (Developer Preview)

Embedded MFE widgets automatically resize their container to match content height. Dynamic forms, tables, and expandable sections render at their natural height without layout workarounds.

Where: This change applies to Lightning Experience, Experience Builder sites, and Experience Cloud LWR sites in all editions.

Note The Dev Channel provides access to features that are not generally available and have been designated as pilot, beta, limited release, or developer preview. Their use is at the Customer's sole discretion and is subject to the Beta Services Terms at Agreements - Salesforce.com.

How: Auto-resizing is active by default. The framework observes content height changes inside the iframe and adjusts the container automatically. Auto-resize affects height only — width is always 100% of the parent container.

External widgets must import @salesforce/experimental-mfe-bridge for auto-resizing to work. The bridge handles height calculation and communication with the host.

Keep these considerations in mind:

• To cap maximum height, wrap the shell in a container with max-height and overflow: auto.
• To disable auto-resize, listen for the resize event on <lwc-shell> and call event.preventDefault().
• Avoid min-height: 100vh or height: 100vh on the widget's root container — viewport units cause an infinite resize loop.
• Reset body margins in your widget (margin: 0; padding: 0) to prevent unnecessary scrollbars.

Supported browsers: Chrome 64+, Firefox 69+, Safari 13.1+, Edge 79+.