Set a max width to EuiPageBody (#3375)

By setting a max width of EuiPageBody we can likely force inner items to not break down in various smaller screen configs.
elastic · Apr 22, 2020 · e252a06 · e252a06
1 parent ca262a7
commit e252a06
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `23.1.0`.
+- Applies `max-width: 100%` to `EuiPageBody` so inner flex-based items don't overflow their containers  ([#3375](https://github.com/elastic/eui/pull/3375))
 
 ## [`23.1.0`](https://github.com/elastic/eui/tree/v23.1.0)
 

diff --git a/src/components/page/page_body/_page_body.scss b/src/components/page/page_body/_page_body.scss
@@ -3,6 +3,8 @@
   flex-direction: column;
   align-items: stretch;
   flex: 1 1 100%;
+  // Make sure that inner flex layouts don't get larger than this container
+  max-width: 100%;
 
   &--restrictWidth-default,
   &--restrictWidth-custom {