From d5dd9227883db6e95a13943f2657d80e34069796 Mon Sep 17 00:00:00 2001
From: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
Date: Mon, 30 Oct 2023 13:39:55 +0000
Subject: [PATCH] updating CHANGELOG.md and testing snapshoots

Signed-off-by: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
---
 CHANGELOG.md                                  |  1 +
 .../__snapshots__/basic_table.test.tsx.snap   |  4 +-
 .../in_memory_table.test.tsx.snap             | 12 +--
 .../collapsible_nav_group.test.tsx.snap       | 20 ++---
 .../__snapshots__/color_picker.test.tsx.snap  | 20 ++---
 .../__snapshots__/combo_box.test.tsx.snap     | 18 ++---
 .../__snapshots__/data_grid.test.tsx.snap     |  4 +-
 .../__snapshots__/empty_prompt.test.tsx.snap  |  4 +-
 .../filter_select_item.test.tsx.snap          |  4 +-
 .../described_form_group.test.tsx.snap        | 28 +++----
 .../__snapshots__/header_alert.test.tsx.snap  |  8 +-
 .../health/__snapshots__/health.test.tsx.snap | 68 ++++++++---------
 .../__snapshots__/page_header.test.tsx.snap   | 40 +++++-----
 .../page_header_content.test.tsx.snap         | 74 +++++++++----------
 .../table_pagination.test.tsx.snap            |  8 +-
 15 files changed, 157 insertions(+), 156 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7ac144d839..13931a9b6d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -57,6 +57,7 @@
 - Adjust background color of OuiToolTip in `next` theme ([#1004](https://github.com/opensearch-project/oui/pull/1004))
 - Add new `middle-out` order prop option to `OuiPaletteColorBlind` ([#856](https://github.com/opensearch-project/oui/pull/856))
 - Add new icons for OpenSearch Dashboards v2.10.0 ([#1014](https://github.com/opensearch-project/oui/pull/1014))
+- Add `shrink` and `basis` props to OuiFlexItem ([#1126](https://github.com/opensearch-project/oui/pull/1126))
 
 ### 🐛 Bug Fixes
 
diff --git a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap
index 85cecb14b7..521e1f2f69 100644
--- a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap
+++ b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap
@@ -1464,7 +1464,7 @@ exports[`OuiBasicTable with initial selection 1`] = `
                 grow={false}
               >
                 <div
-                  className="ouiFlexItem ouiFlexItem--flexGrowZero"
+                  className="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
                 >
                   <OuiI18n
                     default="Select all rows"
@@ -1510,7 +1510,7 @@ exports[`OuiBasicTable with initial selection 1`] = `
                 grow={false}
               >
                 <div
-                  className="ouiFlexItem ouiFlexItem--flexGrowZero"
+                  className="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
                 />
               </OuiFlexItem>
             </div>
diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
index ac72079baf..8901d96306 100644
--- a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
+++ b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
@@ -111,14 +111,14 @@ exports[`OuiInMemoryTable behavior pagination 1`] = `
                   grow={false}
                 >
                   <div
-                    className="ouiFlexItem ouiFlexItem--flexGrowZero"
+                    className="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
                   />
                 </OuiFlexItem>
                 <OuiFlexItem
                   grow={false}
                 >
                   <div
-                    className="ouiFlexItem ouiFlexItem--flexGrowZero"
+                    className="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
                   />
                 </OuiFlexItem>
               </div>
@@ -355,7 +355,7 @@ exports[`OuiInMemoryTable behavior pagination 1`] = `
                   grow={false}
                 >
                   <div
-                    className="ouiFlexItem ouiFlexItem--flexGrowZero"
+                    className="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
                   >
                     <OuiPopover
                       anchorPosition="upRight"
@@ -456,7 +456,7 @@ exports[`OuiInMemoryTable behavior pagination 1`] = `
                   grow={false}
                 >
                   <div
-                    className="ouiFlexItem ouiFlexItem--flexGrowZero"
+                    className="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
                   >
                     <OuiPagination
                       activePage={1}
@@ -904,7 +904,7 @@ exports[`OuiInMemoryTable with initial selection 1`] = `
                   grow={false}
                 >
                   <div
-                    className="ouiFlexItem ouiFlexItem--flexGrowZero"
+                    className="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
                   >
                     <OuiI18n
                       default="Select all rows"
@@ -950,7 +950,7 @@ exports[`OuiInMemoryTable with initial selection 1`] = `
                   grow={false}
                 >
                   <div
-                    className="ouiFlexItem ouiFlexItem--flexGrowZero"
+                    className="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
                   />
                 </OuiFlexItem>
               </div>
diff --git a/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap b/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
index 339d8f2cac..260db66d1e 100644
--- a/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
+++ b/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
@@ -42,7 +42,7 @@ exports[`OuiCollapsibleNavGroup props iconProps renders data-test-subj 1`] = `
       class="ouiFlexGroup ouiFlexGroup--gutterMedium ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
     >
       <div
-        class="ouiFlexItem ouiFlexItem--flexGrowZero"
+        class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
       >
         <span
           data-ouiicon-type="bolt"
@@ -50,7 +50,7 @@ exports[`OuiCollapsibleNavGroup props iconProps renders data-test-subj 1`] = `
         />
       </div>
       <div
-        class="ouiFlexItem"
+        class="ouiFlexItem ouiFlexItem--flexShrink1"
       >
         <h3
           class="ouiTitle ouiTitle--xxsmall ouiCollapsibleNavGroup__title"
@@ -76,14 +76,14 @@ exports[`OuiCollapsibleNavGroup props iconSize is rendered 1`] = `
       class="ouiFlexGroup ouiFlexGroup--gutterMedium ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
     >
       <div
-        class="ouiFlexItem ouiFlexItem--flexGrowZero"
+        class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
       >
         <span
           data-ouiicon-type="bolt"
         />
       </div>
       <div
-        class="ouiFlexItem"
+        class="ouiFlexItem ouiFlexItem--flexShrink1"
       >
         <h3
           class="ouiTitle ouiTitle--xxsmall ouiCollapsibleNavGroup__title"
@@ -109,14 +109,14 @@ exports[`OuiCollapsibleNavGroup props iconType is rendered 1`] = `
       class="ouiFlexGroup ouiFlexGroup--gutterMedium ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
     >
       <div
-        class="ouiFlexItem ouiFlexItem--flexGrowZero"
+        class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
       >
         <span
           data-ouiicon-type="bolt"
         />
       </div>
       <div
-        class="ouiFlexItem"
+        class="ouiFlexItem ouiFlexItem--flexShrink1"
       >
         <h3
           class="ouiTitle ouiTitle--xxsmall ouiCollapsibleNavGroup__title"
@@ -142,7 +142,7 @@ exports[`OuiCollapsibleNavGroup props title is rendered 1`] = `
       class="ouiFlexGroup ouiFlexGroup--gutterMedium ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
     >
       <div
-        class="ouiFlexItem"
+        class="ouiFlexItem ouiFlexItem--flexShrink1"
       >
         <h3
           class="ouiTitle ouiTitle--xxsmall ouiCollapsibleNavGroup__title"
@@ -168,7 +168,7 @@ exports[`OuiCollapsibleNavGroup props titleElement can change the rendered eleme
       class="ouiFlexGroup ouiFlexGroup--gutterMedium ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
     >
       <div
-        class="ouiFlexItem"
+        class="ouiFlexItem ouiFlexItem--flexShrink1"
       >
         <h2
           class="ouiTitle ouiTitle--xxsmall ouiCollapsibleNavGroup__title"
@@ -229,7 +229,7 @@ exports[`OuiCollapsibleNavGroup when isCollapsible is true accepts accordion pro
           class="ouiFlexGroup ouiFlexGroup--gutterMedium ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
         >
           <div
-            class="ouiFlexItem"
+            class="ouiFlexItem ouiFlexItem--flexShrink1"
           >
             <h3
               class="ouiTitle ouiTitle--xxsmall ouiCollapsibleNavGroup__title"
@@ -287,7 +287,7 @@ exports[`OuiCollapsibleNavGroup when isCollapsible is true will render an accord
           class="ouiFlexGroup ouiFlexGroup--gutterMedium ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
         >
           <div
-            class="ouiFlexItem"
+            class="ouiFlexItem ouiFlexItem--flexShrink1"
           >
             <h3
               class="ouiTitle ouiTitle--xxsmall ouiCollapsibleNavGroup__title"
diff --git a/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap b/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap
index 60b9554def..3102351413 100644
--- a/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap
+++ b/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap
@@ -803,7 +803,7 @@ exports[`renders inline OuiColorPicker 1`] = `
     role="listbox"
   >
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       <button
         aria-label="Select #54B399 as the color"
@@ -814,7 +814,7 @@ exports[`renders inline OuiColorPicker 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       <button
         aria-label="Select #6092C0 as the color"
@@ -825,7 +825,7 @@ exports[`renders inline OuiColorPicker 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       <button
         aria-label="Select #D36086 as the color"
@@ -836,7 +836,7 @@ exports[`renders inline OuiColorPicker 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       <button
         aria-label="Select #9170B8 as the color"
@@ -847,7 +847,7 @@ exports[`renders inline OuiColorPicker 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       <button
         aria-label="Select #CA8EAE as the color"
@@ -858,7 +858,7 @@ exports[`renders inline OuiColorPicker 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       <button
         aria-label="Select #D6BF57 as the color"
@@ -869,7 +869,7 @@ exports[`renders inline OuiColorPicker 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       <button
         aria-label="Select #B9A888 as the color"
@@ -880,7 +880,7 @@ exports[`renders inline OuiColorPicker 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       <button
         aria-label="Select #DA8B45 as the color"
@@ -891,7 +891,7 @@ exports[`renders inline OuiColorPicker 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       <button
         aria-label="Select #AA6556 as the color"
@@ -902,7 +902,7 @@ exports[`renders inline OuiColorPicker 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       <button
         aria-label="Select #E7664C as the color"
diff --git a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
index f6994d8f67..ad711abadb 100644
--- a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
+++ b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
@@ -1104,7 +1104,7 @@ exports[`props options list is rendered 1`] = `
               class="ouiFlexGroup ouiFlexGroup--gutterSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
             >
               <span
-                class="ouiFlexItem ouiFilterSelectItem__content"
+                class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFilterSelectItem__content"
               >
                 <span
                   class="ouiComboBoxOption__contentWrapper"
@@ -1131,7 +1131,7 @@ exports[`props options list is rendered 1`] = `
               class="ouiFlexGroup ouiFlexGroup--gutterSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
             >
               <span
-                class="ouiFlexItem ouiFilterSelectItem__content"
+                class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFilterSelectItem__content"
               >
                 <span
                   class="ouiComboBoxOption__contentWrapper"
@@ -1158,7 +1158,7 @@ exports[`props options list is rendered 1`] = `
               class="ouiFlexGroup ouiFlexGroup--gutterSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
             >
               <span
-                class="ouiFlexItem ouiFilterSelectItem__content"
+                class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFilterSelectItem__content"
               >
                 <span
                   class="ouiComboBoxOption__contentWrapper"
@@ -1185,7 +1185,7 @@ exports[`props options list is rendered 1`] = `
               class="ouiFlexGroup ouiFlexGroup--gutterSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
             >
               <span
-                class="ouiFlexItem ouiFilterSelectItem__content"
+                class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFilterSelectItem__content"
               >
                 <span
                   class="ouiComboBoxOption__contentWrapper"
@@ -1212,7 +1212,7 @@ exports[`props options list is rendered 1`] = `
               class="ouiFlexGroup ouiFlexGroup--gutterSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
             >
               <span
-                class="ouiFlexItem ouiFilterSelectItem__content"
+                class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFilterSelectItem__content"
               >
                 <span
                   class="ouiComboBoxOption__contentWrapper"
@@ -1239,7 +1239,7 @@ exports[`props options list is rendered 1`] = `
               class="ouiFlexGroup ouiFlexGroup--gutterSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
             >
               <span
-                class="ouiFlexItem ouiFilterSelectItem__content"
+                class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFilterSelectItem__content"
               >
                 <span
                   class="ouiComboBoxOption__contentWrapper"
@@ -1266,7 +1266,7 @@ exports[`props options list is rendered 1`] = `
               class="ouiFlexGroup ouiFlexGroup--gutterSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
             >
               <span
-                class="ouiFlexItem ouiFilterSelectItem__content"
+                class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFilterSelectItem__content"
               >
                 <span
                   class="ouiComboBoxOption__contentWrapper"
@@ -1293,7 +1293,7 @@ exports[`props options list is rendered 1`] = `
               class="ouiFlexGroup ouiFlexGroup--gutterSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
             >
               <span
-                class="ouiFlexItem ouiFilterSelectItem__content"
+                class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFilterSelectItem__content"
               >
                 <span
                   class="ouiComboBoxOption__contentWrapper"
@@ -1320,7 +1320,7 @@ exports[`props options list is rendered 1`] = `
               class="ouiFlexGroup ouiFlexGroup--gutterSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
             >
               <span
-                class="ouiFlexItem ouiFilterSelectItem__content"
+                class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFilterSelectItem__content"
               >
                 <span
                   class="ouiComboBoxOption__contentWrapper"
diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
index bb537ef767..4af39d3118 100644
--- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
+++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`OuiDataGrid pagination renders 1`] = `
   class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--alignItemsCenter ouiFlexGroup--justifyContentSpaceBetween ouiFlexGroup--directionRow"
 >
   <div
-    class="ouiFlexItem ouiFlexItem--flexGrowZero"
+    class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
   >
     <div
       class="ouiPopover ouiPopover--anchorUpRight"
@@ -37,7 +37,7 @@ exports[`OuiDataGrid pagination renders 1`] = `
     </div>
   </div>
   <div
-    class="ouiFlexItem ouiFlexItem--flexGrowZero"
+    class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
   >
     <nav
       aria-label="Pagination for preceding grid: test grid"
diff --git a/src/components/empty_prompt/__snapshots__/empty_prompt.test.tsx.snap b/src/components/empty_prompt/__snapshots__/empty_prompt.test.tsx.snap
index 2bac2c9da0..ed9ad02a64 100644
--- a/src/components/empty_prompt/__snapshots__/empty_prompt.test.tsx.snap
+++ b/src/components/empty_prompt/__snapshots__/empty_prompt.test.tsx.snap
@@ -63,12 +63,12 @@ exports[`OuiEmptyPrompt props actions renders an array 1`] = `
     class="ouiFlexGroup ouiFlexGroup--gutterMedium ouiFlexGroup--alignItemsCenter ouiFlexGroup--justifyContentCenter ouiFlexGroup--directionColumn ouiFlexGroup--responsive"
   >
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       action1
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       action2
     </div>
diff --git a/src/components/filter_group/__snapshots__/filter_select_item.test.tsx.snap b/src/components/filter_group/__snapshots__/filter_select_item.test.tsx.snap
index 8271cb6034..51a87ddb4a 100644
--- a/src/components/filter_group/__snapshots__/filter_select_item.test.tsx.snap
+++ b/src/components/filter_group/__snapshots__/filter_select_item.test.tsx.snap
@@ -12,14 +12,14 @@ exports[`OuiFilterSelectItem is rendered 1`] = `
     class="ouiFlexGroup ouiFlexGroup--gutterSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
   >
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       <span
         data-ouiicon-type="empty"
       />
     </div>
     <span
-      class="ouiFlexItem ouiFilterSelectItem__content"
+      class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFilterSelectItem__content"
     />
   </span>
 </button>
diff --git a/src/components/form/described_form_group/__snapshots__/described_form_group.test.tsx.snap b/src/components/form/described_form_group/__snapshots__/described_form_group.test.tsx.snap
index a14d8b6f6e..bc1ddef3fd 100644
--- a/src/components/form/described_form_group/__snapshots__/described_form_group.test.tsx.snap
+++ b/src/components/form/described_form_group/__snapshots__/described_form_group.test.tsx.snap
@@ -26,7 +26,7 @@ exports[`OuiDescribedFormGroup is rendered 1`] = `
       >
         <OuiFlexItem>
           <div
-            className="ouiFlexItem"
+            className="ouiFlexItem ouiFlexItem--flexShrink1"
           >
             <OuiTitle
               className="ouiDescribedFormGroup__title"
@@ -64,7 +64,7 @@ exports[`OuiDescribedFormGroup is rendered 1`] = `
           className="ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--xsmall"
         >
           <div
-            className="ouiFlexItem ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--xsmall"
+            className="ouiFlexItem ouiFlexItem--flexShrink1 ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--xsmall"
           >
             <OuiFormRow
               describedByIds={Array []}
@@ -122,7 +122,7 @@ exports[`OuiDescribedFormGroup props description is not rendered when it's not p
       >
         <OuiFlexItem>
           <div
-            className="ouiFlexItem"
+            className="ouiFlexItem ouiFlexItem--flexShrink1"
           >
             <OuiTitle
               className="ouiDescribedFormGroup__title"
@@ -140,7 +140,7 @@ exports[`OuiDescribedFormGroup props description is not rendered when it's not p
           className="ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--xsmall"
         >
           <div
-            className="ouiFlexItem ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--xsmall"
+            className="ouiFlexItem ouiFlexItem--flexShrink1 ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--xsmall"
           >
             <OuiFormRow
               describedByIds={Array []}
@@ -200,7 +200,7 @@ exports[`OuiDescribedFormGroup props fullWidth is rendered 1`] = `
       >
         <OuiFlexItem>
           <div
-            className="ouiFlexItem"
+            className="ouiFlexItem ouiFlexItem--flexShrink1"
           >
             <OuiTitle
               className="ouiDescribedFormGroup__title"
@@ -238,7 +238,7 @@ exports[`OuiDescribedFormGroup props fullWidth is rendered 1`] = `
           className="ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--xsmall"
         >
           <div
-            className="ouiFlexItem ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--xsmall"
+            className="ouiFlexItem ouiFlexItem--flexShrink1 ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--xsmall"
           >
             <OuiFormRow
               describedByIds={Array []}
@@ -298,7 +298,7 @@ exports[`OuiDescribedFormGroup props gutterSize is rendered 1`] = `
       >
         <OuiFlexItem>
           <div
-            className="ouiFlexItem"
+            className="ouiFlexItem ouiFlexItem--flexShrink1"
           >
             <OuiTitle
               className="ouiDescribedFormGroup__title"
@@ -336,7 +336,7 @@ exports[`OuiDescribedFormGroup props gutterSize is rendered 1`] = `
           className="ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--xsmall"
         >
           <div
-            className="ouiFlexItem ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--xsmall"
+            className="ouiFlexItem ouiFlexItem--flexShrink1 ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--xsmall"
           >
             <OuiFormRow
               describedByIds={Array []}
@@ -407,7 +407,7 @@ exports[`OuiDescribedFormGroup props props for the flex item containers are pass
           grow={2}
         >
           <div
-            className="ouiFlexItem ouiFlexItem--flexGrow2"
+            className="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink1"
           >
             <OuiTitle
               className="ouiDescribedFormGroup__title"
@@ -446,7 +446,7 @@ exports[`OuiDescribedFormGroup props props for the flex item containers are pass
           component="section"
         >
           <section
-            className="ouiFlexItem ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--xsmall"
+            className="ouiFlexItem ouiFlexItem--flexShrink1 ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--xsmall"
           >
             <OuiFormRow
               describedByIds={Array []}
@@ -506,7 +506,7 @@ exports[`OuiDescribedFormGroup props titleSize is rendered 1`] = `
       >
         <OuiFlexItem>
           <div
-            className="ouiFlexItem"
+            className="ouiFlexItem ouiFlexItem--flexShrink1"
           >
             <OuiTitle
               className="ouiDescribedFormGroup__title"
@@ -544,7 +544,7 @@ exports[`OuiDescribedFormGroup props titleSize is rendered 1`] = `
           className="ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--large"
         >
           <div
-            className="ouiFlexItem ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--large"
+            className="ouiFlexItem ouiFlexItem--flexShrink1 ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--large"
           >
             <OuiFormRow
               describedByIds={Array []}
@@ -603,7 +603,7 @@ exports[`OuiDescribedFormGroup ties together parts for accessibility 1`] = `
       >
         <OuiFlexItem>
           <div
-            className="ouiFlexItem"
+            className="ouiFlexItem ouiFlexItem--flexShrink1"
           >
             <OuiTitle
               className="ouiDescribedFormGroup__title"
@@ -641,7 +641,7 @@ exports[`OuiDescribedFormGroup ties together parts for accessibility 1`] = `
           className="ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--xsmall"
         >
           <div
-            className="ouiFlexItem ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--xsmall"
+            className="ouiFlexItem ouiFlexItem--flexShrink1 ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--xsmall"
           >
             <OuiFormRow
               describedByIds={Array []}
diff --git a/src/components/header/header_alert/__snapshots__/header_alert.test.tsx.snap b/src/components/header/header_alert/__snapshots__/header_alert.test.tsx.snap
index 4748ed3dc1..0b6edb79a8 100644
--- a/src/components/header/header_alert/__snapshots__/header_alert.test.tsx.snap
+++ b/src/components/header/header_alert/__snapshots__/header_alert.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`OuiHeaderAlert is rendered 1`] = `
     class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--justifyContentSpaceBetween ouiFlexGroup--directionRow ouiFlexGroup--responsive"
   >
     <div
-      class="ouiFlexItem"
+      class="ouiFlexItem ouiFlexItem--flexShrink1"
     >
       <div
         class="ouiHeaderAlert__date"
@@ -43,7 +43,7 @@ exports[`OuiHeaderAlert renders action 1`] = `
     class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--justifyContentSpaceBetween ouiFlexGroup--directionRow ouiFlexGroup--responsive"
   >
     <div
-      class="ouiFlexItem"
+      class="ouiFlexItem ouiFlexItem--flexShrink1"
     >
       <div
         class="ouiHeaderAlert__date"
@@ -82,7 +82,7 @@ exports[`OuiHeaderAlert renders date as an element 1`] = `
     class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--justifyContentSpaceBetween ouiFlexGroup--directionRow ouiFlexGroup--responsive"
   >
     <div
-      class="ouiFlexItem"
+      class="ouiFlexItem ouiFlexItem--flexShrink1"
     >
       <div
         class="ouiHeaderAlert__date"
@@ -116,7 +116,7 @@ exports[`OuiHeaderAlert renders title as an element 1`] = `
     class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--justifyContentSpaceBetween ouiFlexGroup--directionRow ouiFlexGroup--responsive"
   >
     <div
-      class="ouiFlexItem"
+      class="ouiFlexItem ouiFlexItem--flexShrink1"
     >
       <div
         class="ouiHeaderAlert__date"
diff --git a/src/components/health/__snapshots__/health.test.tsx.snap b/src/components/health/__snapshots__/health.test.tsx.snap
index 75f0d990ef..99c2bfd79c 100644
--- a/src/components/health/__snapshots__/health.test.tsx.snap
+++ b/src/components/health/__snapshots__/health.test.tsx.snap
@@ -10,14 +10,14 @@ exports[`OuiHealth is rendered 1`] = `
     class="ouiFlexGroup ouiFlexGroup--gutterExtraSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
   >
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       <span
         data-ouiicon-type="dot"
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     />
   </div>
 </div>
@@ -31,7 +31,7 @@ exports[`OuiHealth props color #000000 is rendered 1`] = `
     class="ouiFlexGroup ouiFlexGroup--gutterExtraSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
   >
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       <span
         color="#000000"
@@ -39,7 +39,7 @@ exports[`OuiHealth props color #000000 is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     />
   </div>
 </div>
@@ -53,7 +53,7 @@ exports[`OuiHealth props color accent is rendered 1`] = `
     class="ouiFlexGroup ouiFlexGroup--gutterExtraSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
   >
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       <span
         color="accent"
@@ -61,7 +61,7 @@ exports[`OuiHealth props color accent is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     />
   </div>
 </div>
@@ -75,7 +75,7 @@ exports[`OuiHealth props color danger is rendered 1`] = `
     class="ouiFlexGroup ouiFlexGroup--gutterExtraSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
   >
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       <span
         color="danger"
@@ -83,7 +83,7 @@ exports[`OuiHealth props color danger is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     />
   </div>
 </div>
@@ -97,7 +97,7 @@ exports[`OuiHealth props color default is rendered 1`] = `
     class="ouiFlexGroup ouiFlexGroup--gutterExtraSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
   >
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       <span
         color="default"
@@ -105,7 +105,7 @@ exports[`OuiHealth props color default is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     />
   </div>
 </div>
@@ -119,7 +119,7 @@ exports[`OuiHealth props color ghost is rendered 1`] = `
     class="ouiFlexGroup ouiFlexGroup--gutterExtraSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
   >
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       <span
         color="ghost"
@@ -127,7 +127,7 @@ exports[`OuiHealth props color ghost is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     />
   </div>
 </div>
@@ -141,7 +141,7 @@ exports[`OuiHealth props color inherit is rendered 1`] = `
     class="ouiFlexGroup ouiFlexGroup--gutterExtraSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
   >
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       <span
         color="inherit"
@@ -149,7 +149,7 @@ exports[`OuiHealth props color inherit is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     />
   </div>
 </div>
@@ -163,7 +163,7 @@ exports[`OuiHealth props color primary is rendered 1`] = `
     class="ouiFlexGroup ouiFlexGroup--gutterExtraSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
   >
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       <span
         color="primary"
@@ -171,7 +171,7 @@ exports[`OuiHealth props color primary is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     />
   </div>
 </div>
@@ -185,7 +185,7 @@ exports[`OuiHealth props color secondary is rendered 1`] = `
     class="ouiFlexGroup ouiFlexGroup--gutterExtraSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
   >
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       <span
         color="secondary"
@@ -193,7 +193,7 @@ exports[`OuiHealth props color secondary is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     />
   </div>
 </div>
@@ -207,7 +207,7 @@ exports[`OuiHealth props color subdued is rendered 1`] = `
     class="ouiFlexGroup ouiFlexGroup--gutterExtraSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
   >
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       <span
         color="subdued"
@@ -215,7 +215,7 @@ exports[`OuiHealth props color subdued is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     />
   </div>
 </div>
@@ -229,7 +229,7 @@ exports[`OuiHealth props color success is rendered 1`] = `
     class="ouiFlexGroup ouiFlexGroup--gutterExtraSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
   >
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       <span
         color="success"
@@ -237,7 +237,7 @@ exports[`OuiHealth props color success is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     />
   </div>
 </div>
@@ -251,7 +251,7 @@ exports[`OuiHealth props color text is rendered 1`] = `
     class="ouiFlexGroup ouiFlexGroup--gutterExtraSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
   >
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       <span
         color="text"
@@ -259,7 +259,7 @@ exports[`OuiHealth props color text is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     />
   </div>
 </div>
@@ -273,7 +273,7 @@ exports[`OuiHealth props color warning is rendered 1`] = `
     class="ouiFlexGroup ouiFlexGroup--gutterExtraSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
   >
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       <span
         color="warning"
@@ -281,7 +281,7 @@ exports[`OuiHealth props color warning is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     />
   </div>
 </div>
@@ -295,7 +295,7 @@ exports[`OuiHealth props textSize inherit is rendered 1`] = `
     class="ouiFlexGroup ouiFlexGroup--gutterExtraSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
   >
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       <span
         color="success"
@@ -303,7 +303,7 @@ exports[`OuiHealth props textSize inherit is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     />
   </div>
 </div>
@@ -317,7 +317,7 @@ exports[`OuiHealth props textSize m is rendered 1`] = `
     class="ouiFlexGroup ouiFlexGroup--gutterExtraSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
   >
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       <span
         color="success"
@@ -325,7 +325,7 @@ exports[`OuiHealth props textSize m is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     />
   </div>
 </div>
@@ -339,7 +339,7 @@ exports[`OuiHealth props textSize s is rendered 1`] = `
     class="ouiFlexGroup ouiFlexGroup--gutterExtraSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
   >
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       <span
         color="success"
@@ -347,7 +347,7 @@ exports[`OuiHealth props textSize s is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     />
   </div>
 </div>
@@ -361,7 +361,7 @@ exports[`OuiHealth props textSize xs is rendered 1`] = `
     class="ouiFlexGroup ouiFlexGroup--gutterExtraSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
   >
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       <span
         color="success"
@@ -369,7 +369,7 @@ exports[`OuiHealth props textSize xs is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     />
   </div>
 </div>
diff --git a/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap b/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap
index 85c186b3a0..e90e873630 100644
--- a/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap
+++ b/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap
@@ -21,7 +21,7 @@ exports[`OuiPageHeader props alignItems bottom is rendered 1`] = `
       class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--alignItemsFlexEnd ouiFlexGroup--directionRow ouiFlexGroup--responsive ouiPageHeaderContent__top"
     >
       <div
-        class="ouiFlexItem"
+        class="ouiFlexItem ouiFlexItem--flexShrink1"
       >
         <h1
           class="ouiTitle ouiTitle--large"
@@ -30,20 +30,20 @@ exports[`OuiPageHeader props alignItems bottom is rendered 1`] = `
         </h1>
       </div>
       <div
-        class="ouiFlexItem ouiFlexItem--flexGrowZero"
+        class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
       >
         <div
           class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--directionRow ouiFlexGroup--wrap ouiPageHeaderContent__rightSideItems"
         >
           <div
-            class="ouiFlexItem ouiFlexItem--flexGrowZero"
+            class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
           >
             <button>
               Button 1
             </button>
           </div>
           <div
-            class="ouiFlexItem ouiFlexItem--flexGrowZero"
+            class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
           >
             <button>
               Button 2
@@ -67,7 +67,7 @@ exports[`OuiPageHeader props alignItems center is rendered 1`] = `
       class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow ouiFlexGroup--responsive ouiPageHeaderContent__top"
     >
       <div
-        class="ouiFlexItem"
+        class="ouiFlexItem ouiFlexItem--flexShrink1"
       >
         <h1
           class="ouiTitle ouiTitle--large"
@@ -76,20 +76,20 @@ exports[`OuiPageHeader props alignItems center is rendered 1`] = `
         </h1>
       </div>
       <div
-        class="ouiFlexItem ouiFlexItem--flexGrowZero"
+        class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
       >
         <div
           class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--directionRow ouiFlexGroup--wrap ouiPageHeaderContent__rightSideItems"
         >
           <div
-            class="ouiFlexItem ouiFlexItem--flexGrowZero"
+            class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
           >
             <button>
               Button 1
             </button>
           </div>
           <div
-            class="ouiFlexItem ouiFlexItem--flexGrowZero"
+            class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
           >
             <button>
               Button 2
@@ -113,7 +113,7 @@ exports[`OuiPageHeader props alignItems stretch is rendered 1`] = `
       class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--directionRow ouiFlexGroup--responsive ouiPageHeaderContent__top"
     >
       <div
-        class="ouiFlexItem"
+        class="ouiFlexItem ouiFlexItem--flexShrink1"
       >
         <h1
           class="ouiTitle ouiTitle--large"
@@ -122,20 +122,20 @@ exports[`OuiPageHeader props alignItems stretch is rendered 1`] = `
         </h1>
       </div>
       <div
-        class="ouiFlexItem ouiFlexItem--flexGrowZero"
+        class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
       >
         <div
           class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--directionRow ouiFlexGroup--wrap ouiPageHeaderContent__rightSideItems"
         >
           <div
-            class="ouiFlexItem ouiFlexItem--flexGrowZero"
+            class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
           >
             <button>
               Button 1
             </button>
           </div>
           <div
-            class="ouiFlexItem ouiFlexItem--flexGrowZero"
+            class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
           >
             <button>
               Button 2
@@ -159,7 +159,7 @@ exports[`OuiPageHeader props alignItems top is rendered 1`] = `
       class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--alignItemsFlexStart ouiFlexGroup--directionRow ouiFlexGroup--responsive ouiPageHeaderContent__top"
     >
       <div
-        class="ouiFlexItem"
+        class="ouiFlexItem ouiFlexItem--flexShrink1"
       >
         <h1
           class="ouiTitle ouiTitle--large"
@@ -168,20 +168,20 @@ exports[`OuiPageHeader props alignItems top is rendered 1`] = `
         </h1>
       </div>
       <div
-        class="ouiFlexItem ouiFlexItem--flexGrowZero"
+        class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
       >
         <div
           class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--directionRow ouiFlexGroup--wrap ouiPageHeaderContent__rightSideItems"
         >
           <div
-            class="ouiFlexItem ouiFlexItem--flexGrowZero"
+            class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
           >
             <button>
               Button 1
             </button>
           </div>
           <div
-            class="ouiFlexItem ouiFlexItem--flexGrowZero"
+            class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
           >
             <button>
               Button 2
@@ -205,7 +205,7 @@ exports[`OuiPageHeader props page content props are passed down is rendered 1`]
       class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--alignItemsFlexStart ouiFlexGroup--directionRow ouiFlexGroup--responsive ouiPageHeaderContent__top"
     >
       <div
-        class="ouiFlexItem"
+        class="ouiFlexItem ouiFlexItem--flexShrink1"
       >
         <h1
           class="ouiTitle ouiTitle--large"
@@ -224,7 +224,7 @@ exports[`OuiPageHeader props page content props are passed down is rendered 1`]
         </div>
       </div>
       <div
-        class="ouiFlexItem ouiFlexItem--flexGrowZero"
+        class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
       >
         <div
           aria-label="aria-label"
@@ -232,14 +232,14 @@ exports[`OuiPageHeader props page content props are passed down is rendered 1`]
           data-test-subj="test subject string"
         >
           <div
-            class="ouiFlexItem ouiFlexItem--flexGrowZero"
+            class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
           >
             <button>
               Button 1
             </button>
           </div>
           <div
-            class="ouiFlexItem ouiFlexItem--flexGrowZero"
+            class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
           >
             <button>
               Button 2
diff --git a/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap b/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap
index 1210518f23..0fe4cadb8e 100644
--- a/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap
+++ b/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`OuiPageHeaderContent is rendered 1`] = `
     class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--alignItemsFlexStart ouiFlexGroup--directionRow ouiFlexGroup--responsive ouiPageHeaderContent__top"
   >
     <div
-      class="ouiFlexItem"
+      class="ouiFlexItem ouiFlexItem--flexShrink1"
     />
   </div>
 </div>
@@ -24,7 +24,7 @@ exports[`OuiPageHeaderContent props alignItems bottom is rendered 1`] = `
     class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--alignItemsFlexEnd ouiFlexGroup--directionRow ouiFlexGroup--responsive ouiPageHeaderContent__top"
   >
     <div
-      class="ouiFlexItem"
+      class="ouiFlexItem ouiFlexItem--flexShrink1"
     >
       <h1
         class="ouiTitle ouiTitle--large"
@@ -33,20 +33,20 @@ exports[`OuiPageHeaderContent props alignItems bottom is rendered 1`] = `
       </h1>
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       <div
         class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--directionRow ouiFlexGroup--wrap ouiPageHeaderContent__rightSideItems"
       >
         <div
-          class="ouiFlexItem ouiFlexItem--flexGrowZero"
+          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
         >
           <button>
             Button 1
           </button>
         </div>
         <div
-          class="ouiFlexItem ouiFlexItem--flexGrowZero"
+          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
         >
           <button>
             Button 2
@@ -66,7 +66,7 @@ exports[`OuiPageHeaderContent props alignItems center is rendered 1`] = `
     class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow ouiFlexGroup--responsive ouiPageHeaderContent__top"
   >
     <div
-      class="ouiFlexItem"
+      class="ouiFlexItem ouiFlexItem--flexShrink1"
     >
       <h1
         class="ouiTitle ouiTitle--large"
@@ -75,20 +75,20 @@ exports[`OuiPageHeaderContent props alignItems center is rendered 1`] = `
       </h1>
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       <div
         class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--directionRow ouiFlexGroup--wrap ouiPageHeaderContent__rightSideItems"
       >
         <div
-          class="ouiFlexItem ouiFlexItem--flexGrowZero"
+          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
         >
           <button>
             Button 1
           </button>
         </div>
         <div
-          class="ouiFlexItem ouiFlexItem--flexGrowZero"
+          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
         >
           <button>
             Button 2
@@ -108,7 +108,7 @@ exports[`OuiPageHeaderContent props alignItems stretch is rendered 1`] = `
     class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--directionRow ouiFlexGroup--responsive ouiPageHeaderContent__top"
   >
     <div
-      class="ouiFlexItem"
+      class="ouiFlexItem ouiFlexItem--flexShrink1"
     >
       <h1
         class="ouiTitle ouiTitle--large"
@@ -117,20 +117,20 @@ exports[`OuiPageHeaderContent props alignItems stretch is rendered 1`] = `
       </h1>
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       <div
         class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--directionRow ouiFlexGroup--wrap ouiPageHeaderContent__rightSideItems"
       >
         <div
-          class="ouiFlexItem ouiFlexItem--flexGrowZero"
+          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
         >
           <button>
             Button 1
           </button>
         </div>
         <div
-          class="ouiFlexItem ouiFlexItem--flexGrowZero"
+          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
         >
           <button>
             Button 2
@@ -150,7 +150,7 @@ exports[`OuiPageHeaderContent props alignItems top is rendered 1`] = `
     class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--alignItemsFlexStart ouiFlexGroup--directionRow ouiFlexGroup--responsive ouiPageHeaderContent__top"
   >
     <div
-      class="ouiFlexItem"
+      class="ouiFlexItem ouiFlexItem--flexShrink1"
     >
       <h1
         class="ouiTitle ouiTitle--large"
@@ -159,20 +159,20 @@ exports[`OuiPageHeaderContent props alignItems top is rendered 1`] = `
       </h1>
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       <div
         class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--directionRow ouiFlexGroup--wrap ouiPageHeaderContent__rightSideItems"
       >
         <div
-          class="ouiFlexItem ouiFlexItem--flexGrowZero"
+          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
         >
           <button>
             Button 1
           </button>
         </div>
         <div
-          class="ouiFlexItem ouiFlexItem--flexGrowZero"
+          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
         >
           <button>
             Button 2
@@ -192,7 +192,7 @@ exports[`OuiPageHeaderContent props children is rendered 1`] = `
     class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--alignItemsFlexStart ouiFlexGroup--directionRow ouiFlexGroup--responsive ouiPageHeaderContent__top"
   >
     <div
-      class="ouiFlexItem"
+      class="ouiFlexItem ouiFlexItem--flexShrink1"
     />
   </div>
   <div
@@ -216,7 +216,7 @@ exports[`OuiPageHeaderContent props children is rendered 2`] = `
     class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--alignItemsFlexStart ouiFlexGroup--directionRow ouiFlexGroup--responsive ouiPageHeaderContent__top"
   >
     <div
-      class="ouiFlexItem"
+      class="ouiFlexItem ouiFlexItem--flexShrink1"
     />
   </div>
   <div
@@ -238,7 +238,7 @@ exports[`OuiPageHeaderContent props children is rendered even if content props a
     class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--alignItemsFlexStart ouiFlexGroup--directionRow ouiFlexGroup--responsive ouiPageHeaderContent__top"
   >
     <div
-      class="ouiFlexItem"
+      class="ouiFlexItem ouiFlexItem--flexShrink1"
     >
       <h1
         class="ouiTitle ouiTitle--large"
@@ -247,20 +247,20 @@ exports[`OuiPageHeaderContent props children is rendered even if content props a
       </h1>
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       <div
         class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--directionRow ouiFlexGroup--wrap ouiPageHeaderContent__rightSideItems"
       >
         <div
-          class="ouiFlexItem ouiFlexItem--flexGrowZero"
+          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
         >
           <button>
             Button 1
           </button>
         </div>
         <div
-          class="ouiFlexItem ouiFlexItem--flexGrowZero"
+          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
         >
           <button>
             Button 2
@@ -320,7 +320,7 @@ exports[`OuiPageHeaderContent props description is rendered 1`] = `
     class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--alignItemsFlexStart ouiFlexGroup--directionRow ouiFlexGroup--responsive ouiPageHeaderContent__top"
   >
     <div
-      class="ouiFlexItem"
+      class="ouiFlexItem ouiFlexItem--flexShrink1"
     >
       <div
         class="ouiText ouiText--medium ouiText--constrainedWidth"
@@ -342,7 +342,7 @@ exports[`OuiPageHeaderContent props pageTitle is rendered 1`] = `
     class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--alignItemsFlexStart ouiFlexGroup--directionRow ouiFlexGroup--responsive ouiPageHeaderContent__top"
   >
     <div
-      class="ouiFlexItem"
+      class="ouiFlexItem ouiFlexItem--flexShrink1"
     >
       <h1
         class="ouiTitle ouiTitle--large"
@@ -362,7 +362,7 @@ exports[`OuiPageHeaderContent props responsive is rendered as false 1`] = `
     class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--alignItemsFlexStart ouiFlexGroup--directionRow ouiPageHeaderContent__top"
   >
     <div
-      class="ouiFlexItem"
+      class="ouiFlexItem ouiFlexItem--flexShrink1"
     />
   </div>
 </div>
@@ -376,7 +376,7 @@ exports[`OuiPageHeaderContent props responsive is rendered as reverse 1`] = `
     class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--alignItemsFlexStart ouiFlexGroup--directionRow ouiFlexGroup--responsive ouiPageHeaderContent__top"
   >
     <div
-      class="ouiFlexItem"
+      class="ouiFlexItem ouiFlexItem--flexShrink1"
     />
   </div>
 </div>
@@ -390,23 +390,23 @@ exports[`OuiPageHeaderContent props rightSideItems is rendered 1`] = `
     class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--alignItemsFlexStart ouiFlexGroup--directionRow ouiFlexGroup--responsive ouiPageHeaderContent__top"
   >
     <div
-      class="ouiFlexItem"
+      class="ouiFlexItem ouiFlexItem--flexShrink1"
     />
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       <div
         class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--directionRow ouiFlexGroup--wrap ouiPageHeaderContent__rightSideItems"
       >
         <div
-          class="ouiFlexItem ouiFlexItem--flexGrowZero"
+          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
         >
           <button>
             Button 1
           </button>
         </div>
         <div
-          class="ouiFlexItem ouiFlexItem--flexGrowZero"
+          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
         >
           <button>
             Button 2
@@ -426,10 +426,10 @@ exports[`OuiPageHeaderContent props rightSideItems is rendered with rightSideGro
     class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--alignItemsFlexStart ouiFlexGroup--directionRow ouiFlexGroup--responsive ouiPageHeaderContent__top"
   >
     <div
-      class="ouiFlexItem"
+      class="ouiFlexItem ouiFlexItem--flexShrink1"
     />
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       <div
         aria-label="aria-label"
@@ -437,14 +437,14 @@ exports[`OuiPageHeaderContent props rightSideItems is rendered with rightSideGro
         data-test-subj="test subject string"
       >
         <div
-          class="ouiFlexItem ouiFlexItem--flexGrowZero"
+          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
         >
           <button>
             Button 1
           </button>
         </div>
         <div
-          class="ouiFlexItem ouiFlexItem--flexGrowZero"
+          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
         >
           <button>
             Button 2
@@ -464,7 +464,7 @@ exports[`OuiPageHeaderContent props tabs is rendered 1`] = `
     class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--alignItemsFlexStart ouiFlexGroup--directionRow ouiFlexGroup--responsive ouiPageHeaderContent__top"
   >
     <div
-      class="ouiFlexItem"
+      class="ouiFlexItem ouiFlexItem--flexShrink1"
     >
       <div
         class="ouiTabs ouiTabs--condensed ouiTabs--large"
@@ -508,7 +508,7 @@ exports[`OuiPageHeaderContent props tabs is rendered with tabsProps 1`] = `
     class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--alignItemsFlexStart ouiFlexGroup--directionRow ouiFlexGroup--responsive ouiPageHeaderContent__top"
   >
     <div
-      class="ouiFlexItem"
+      class="ouiFlexItem ouiFlexItem--flexShrink1"
     >
       <div
         aria-label="aria-label"
diff --git a/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap b/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap
index 70aafd549c..1bc902ef65 100644
--- a/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap
+++ b/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`OuiTablePagination is rendered 1`] = `
   class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--alignItemsCenter ouiFlexGroup--justifyContentSpaceBetween ouiFlexGroup--directionRow"
 >
   <div
-    class="ouiFlexItem ouiFlexItem--flexGrowZero"
+    class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
   >
     <div
       class="ouiPopover ouiPopover--anchorUpRight"
@@ -37,7 +37,7 @@ exports[`OuiTablePagination is rendered 1`] = `
     </div>
   </div>
   <div
-    class="ouiFlexItem ouiFlexItem--flexGrowZero"
+    class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
   >
     <nav
       aria-label="aria-label"
@@ -187,10 +187,10 @@ exports[`OuiTablePagination is rendered when hiding the per page options 1`] = `
   class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--alignItemsCenter ouiFlexGroup--justifyContentSpaceBetween ouiFlexGroup--directionRow"
 >
   <div
-    class="ouiFlexItem ouiFlexItem--flexGrowZero"
+    class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
   />
   <div
-    class="ouiFlexItem ouiFlexItem--flexGrowZero"
+    class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
   >
     <nav
       aria-label="aria-label"