Describe the problem
base-no-reset.css sets container-type: inline-size and container-name: pf-v6-contain-viewport pf-v6-contain-table on :root (the <html> element). This is a global side effect that breaks applications where PatternFly is used as a guest library (i.e., PF components are rendered inside a host application that owns the document layout).
When container-type: inline-size is applied to <html>, it changes how the root element participates in CSS containment. This breaks the natural <body> height propagation — body.scrollHeight becomes smaller than the viewport height, exposing the browser's default white canvas below the page content. This is especially visible in dark-themed host applications.
The affected file is: @patternfly/react-core/dist/styles/base-no-reset.css
The problematic rule:
:root {
container-type: inline-size;
container-name: pf-v6-contain-viewport pf-v6-contain-table;
}How do you reproduce the problem?
- Use a host application with its own theming system (e.g., Backstage/RHDH with a dark theme)
- Import
@patternfly/react-core/dist/styles/base-no-reset.css in a component
- Observe that the
<html> element gets container-type: inline-size
- The
<body> no longer fills the viewport height — a white gap appears at the bottom of the page
- In dark-themed applications, this manifests as a white background leak
Expected behavior
base-no-reset.css should NOT apply container-type: inline-size to :root/<html>, or at minimum should scope it to a PatternFly-owned wrapper element. The "no-reset" variant of the base styles is specifically meant for embedded usage where PF does not own the full document — applying global layout mutations defeats that purpose.
If container queries are needed for PF components, the containment context should be set on a PF wrapper element (e.g., .pf-v6-root or similar), not on the document root.
Is this issue blocking you?
We are working around this by explicitly resetting container-type on the <html> element via JavaScript after PF CSS loads:
useLayoutEffect(() => {
document.documentElement.style.containerType = 'normal';
}, []);This is not ideal as it's a permanent global mutation to counteract another permanent global mutation.
Screenshots
After removing container-type: inline-size
What is your environment?
-
OS: macOS
-
Browser: Chrome, Firefox (all browsers affected)
-
PatternFly version: @patternfly/react-core 6.6.0 (introduced between 6.4.3 and 6.6.0)
What is your product and what release date are you targeting?
Red Hat Developer Hub (RHDH) — the Intelligent Assistant plugin uses PatternFly Chatbot components inside a Backstage application.
Any other information?
-
This was not an issue on @patternfly/react-core@6.4.3 — the container-type rule was introduced sometime between 6.4.3 and 6.6.0.
-
The base-no-reset.css variant implies it's safe for embedded use. Adding global containment to :root contradicts that contract.
-
The container-name values (pf-v6-contain-viewport, pf-v6-contain-table) suggest this is for PF's internal @container queries — these should be scoped to a PF-owned container element rather than the document root.
Jira Issue: PF-4453
Describe the problem
base-no-reset.csssetscontainer-type: inline-sizeandcontainer-name: pf-v6-contain-viewport pf-v6-contain-tableon:root(the<html>element). This is a global side effect that breaks applications where PatternFly is used as a guest library (i.e., PF components are rendered inside a host application that owns the document layout).When
container-type: inline-sizeis applied to<html>, it changes how the root element participates in CSS containment. This breaks the natural<body>height propagation —body.scrollHeightbecomes smaller than the viewport height, exposing the browser's default white canvas below the page content. This is especially visible in dark-themed host applications.The affected file is:
@patternfly/react-core/dist/styles/base-no-reset.cssThe problematic rule:
How do you reproduce the problem?
@patternfly/react-core/dist/styles/base-no-reset.cssin a component<html>element getscontainer-type: inline-size<body>no longer fills the viewport height — a white gap appears at the bottom of the pageExpected behavior
base-no-reset.cssshould NOT applycontainer-type: inline-sizeto:root/<html>, or at minimum should scope it to a PatternFly-owned wrapper element. The "no-reset" variant of the base styles is specifically meant for embedded usage where PF does not own the full document — applying global layout mutations defeats that purpose.If container queries are needed for PF components, the containment context should be set on a PF wrapper element (e.g.,
.pf-v6-rootor similar), not on the document root.Is this issue blocking you?
We are working around this by explicitly resetting
container-typeon the<html>element via JavaScript after PF CSS loads:This is not ideal as it's a permanent global mutation to counteract another permanent global mutation.
Screenshots
After removing
container-type: inline-sizeWhat is your environment?
OS: macOS
Browser: Chrome, Firefox (all browsers affected)
PatternFly version:
@patternfly/react-core6.6.0 (introduced between 6.4.3 and 6.6.0)What is your product and what release date are you targeting?
Red Hat Developer Hub (RHDH) — the Intelligent Assistant plugin uses PatternFly Chatbot components inside a Backstage application.
Any other information?
This was not an issue on
@patternfly/react-core@6.4.3— thecontainer-typerule was introduced sometime between 6.4.3 and 6.6.0.The
base-no-reset.cssvariant implies it's safe for embedded use. Adding global containment to:rootcontradicts that contract.The
container-namevalues (pf-v6-contain-viewport,pf-v6-contain-table) suggest this is for PF's internal@containerqueries — these should be scoped to a PF-owned container element rather than the document root.Jira Issue: PF-4453