Styling embedded application containers

When embedding an application, styling its container correctly ensures a consistent, responsive, and user-friendly experience. This guide outlines best practices for defining container dimensions, handling responsiveness, and managing layout constraints.

Note: This guide assumes some basic familiarity with HTML and CSS. If you're new to web development, consider reviewing foundational concepts before applying these best practices.

Define a clear container structure

Each embedded application needs a dedicated container within the web page. The container should:

Be an empty HTML element (usually a div) that serves as the target for embedding.
Be styled appropriately to integrate seamlessly within your layout.
Either have an explicit width and height or use Flexbox to allow dynamic sizing.

Example container:

<div id="embedded-app"></div>

Default iframe styles

When the embedded application is injected into the container, it is placed inside an iframe element. This iframe comes with the following default styles applied:

iframe {  
  width: 100%;  
  height: 100%;  
  border: 0;  
}

These styles ensure that the iframe fully fills the container it is placed within and has no visible border.

However, the container itself determines the final dimensions of the iframe. If the parent container does not have an explicit width and height, the iframe may collapse or behave unexpectedly.

Set explicit width and height

Since the iframe is set to width: 100% and height: 100%, the container's dimensions determine the size of the embedded application, making proper styling essential.

Full-page embed

If the embedded application should take up the full screen, you could use:

#embedded-app {  
  width: 100%;  
  height: 100vh; /* Full viewport height */  
}

This is useful when the application functions as a standalone experience and needs to fit the entire screen.

Fixed-size embed

If the embedded application should fit within a specific section of the page, define a fixed width and height:

#embedded-app {  
  width: 600px;  
  height: 800px;  
}

This works well when embedding the application into a predefined section within a larger layout.

Making the iframe responsive

If the embedded application is to be placed within a responsive layout, the container should be designed to adapt to different screen sizes. Because the iframe has width: 100% and height: 100% by default, the container's styling determines how the embedded application behaves across various screen sizes.

Using percentage-based sizing

For fluid layouts, consider setting the container width to a percentage while maintaining a reasonable height:

#embedded-app {  
  width: 100%;  
  max-width: 900px; /* Prevents it from getting too wide on large screens */  
  height: auto;  
  min-height: 500px; /* Ensures it doesn't shrink too much */  
}

This allows the embedded application to scale dynamically while maintaining usability.

Controlling height in responsive layouts

Since the iframe expands to fill its container, ensuring proper height control is important. Depending on your use case, you may choose:

Fixed height – Keeps a consistent height regardless of the viewport.
Viewport-based height – Scales based on the screen size using vh units.
Flexible height – Allows the embedded application to adjust dynamically based on content.

Example: Viewport-based height

#embedded-app {  
  width: 100%;  
  height: 80vh; /* Takes up 80% of the viewport height */  
}

Example: Flexbox-based height

If the embedded application is inside a Flexbox layout, you can allow it to grow and shrink dynamically:

.flex-container {  
  display: flex;  
  flex-direction: column;
  height: 100vh; /* Ensures the full viewport is used */
}  

#embedded-app {
  display: flex; /* Enables flexible behavior */
  flex: 1; /* Allows it to grow within the flex container */
}

#embedded-app > iframe {
  flex: 1; /* Ensures the iframe fills the container */
}

Consider overflow and scrolling

By default, embedded applications may not automatically adjust their height to fit their content. If the integration has scrolling content, make sure to handle it with overflow rules.

#embedded-app {  
  width: 100%;  
  height: 600px;  
  overflow: auto;  
}

This prevents content from being clipped and ensures that scrolling works when necessary.