From d7426fe3c94c7b3c665bd347b49668f8352cf77b Mon Sep 17 00:00:00 2001
From: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
Date: Fri, 27 Oct 2023 13:52:47 +0100
Subject: [PATCH 01/24] adding shrink and basis props for OuiFlexItem

Signed-off-by: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
---
 src/components/flex/_flex_item.scss | 28 +++++++++++--
 src/components/flex/flex_item.tsx   | 63 ++++++++++++++++++++++++++++-
 2 files changed, 86 insertions(+), 5 deletions(-)

diff --git a/src/components/flex/_flex_item.scss b/src/components/flex/_flex_item.scss
index 49cd501345..d9e0a1c4a6 100644
--- a/src/components/flex/_flex_item.scss
+++ b/src/components/flex/_flex_item.scss
@@ -24,18 +24,38 @@
 
   /*
    * 1. We need the extra specificity here to override the FlexGroup > FlexItem styles.
-   * 2. FlexItem can be manually set to not grow if needed.
+   * 2. FlexItem can be manually set to not grow if needed (default).
+   * 3. FlexItem also can be given values for grow, shrink and basis:
+   *    - grow: 1..10
+   *    - shrink: 1..10
+   *    - basis: auto, 0%, 25%, 50%, 75% or 100%
    */
+
   &.ouiFlexItem--flexGrowZero { /* 1 */
     flex-grow: 0; /* 2 */
     flex-basis: auto; /* 2 */
   }
 
-  @for $i from 1 through 10 {
-    &.ouiFlexItem--flexGrow#{$i} {
-      flex-grow: $i;
+  @for $i from 1 through 10 { /* 3 */
+    &.ouiFlexItem--flexGrow#{$i} { /* 3 */
+      flex-grow: $i; /* 3 */
     }
   }
+
+  @for $i from 1 through 10 { /* 3 */
+    &.ouiFlexItem--flexShrink#{$i} { /* 3 */
+      flex-shrink: $i; /* 3 */
+    }
+  }
+
+  $flexBasisOptions: 'auto', '0%', '25%', '50%', '75%', '100%'; /* 3 */
+
+  @each $basis in $flexBasisOptions { /* 3 */
+    .ouiFlexItem--flexBasis#{$basis} { /* 3 */
+      flex-basis: $basis; /* 3 */
+    }
+  }
+
 }
 
 // On mobile we force them to stack and act the same.
diff --git a/src/components/flex/flex_item.tsx b/src/components/flex/flex_item.tsx
index 9d558c01a0..f77a4d2d6a 100644
--- a/src/components/flex/flex_item.tsx
+++ b/src/components/flex/flex_item.tsx
@@ -46,13 +46,43 @@ export type FlexItemGrowSize =
   | true
   | false
   | null;
+export type FlexItemShrinkSize =
+  | 1
+  | 2
+  | 3
+  | 4
+  | 5
+  | 6
+  | 7
+  | 8
+  | 9
+  | 10
+  | true
+  | false
+  | null;
+export type FlexItemBasisValue = string | true | false | null;
 
 export interface OuiFlexItemProps {
   grow?: FlexItemGrowSize;
+  shrink?: FlexItemShrinkSize;
+  basis?: FlexItemBasisValue;
   component?: keyof JSX.IntrinsicElements;
 }
 
 export const GROW_SIZES: FlexItemGrowSize[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+export const SHRINK_SIZES: FlexItemShrinkSize[] = [
+  1,
+  2,
+  3,
+  4,
+  5,
+  6,
+  7,
+  8,
+  9,
+  10,
+];
+export const BASIS_VALUES:FlexItemBasisValue[] = ['auto','0%','25%','50%','75%','100%']
 
 export const OuiFlexItem: FunctionComponent<
   CommonProps &
@@ -61,11 +91,15 @@ export const OuiFlexItem: FunctionComponent<
 > = ({
   children,
   className,
-  grow = true,
+  grow = true, // default true -> keep grow 1 coming from flex_grid
+  shrink = 1, // default 1 for shrink
+  basis = 'auto', // default 'auto' basis
   component: Component = 'div',
   ...rest
 }) => {
   validateGrowValue(grow);
+  validateShrinkValue(shrink);
+  validateBasisValue(basis);
 
   const classes = classNames(
     'ouiFlexItem',
@@ -73,6 +107,10 @@ export const OuiFlexItem: FunctionComponent<
       'ouiFlexItem--flexGrowZero': !grow,
       [`ouiFlexItem--flexGrow${grow}`]:
         typeof grow === 'number' ? GROW_SIZES.indexOf(grow) >= 0 : undefined,
+      [`ouiFlexItem--flexShrink${shrink}`]:
+        typeof shrink === 'number' ? SHRINK_SIZES.indexOf(shrink) >= 0 : undefined,
+      [`ouiFlexItem--flexBasis${basis}`]:
+        typeof shrink === 'string' ? BASIS_VALUES.indexOf(shrink) >= 0 : undefined,
     },
     className
   );
@@ -94,3 +132,26 @@ function validateGrowValue(value: OuiFlexItemProps['grow']) {
     );
   }
 }
+
+function validateShrinkValue(value: OuiFlexItemProps['shrink']) {
+  // New function
+  const validValues = [null, undefined, true, false, ...SHRINK_SIZES];
+
+  if (validValues.indexOf(value) === -1) {
+    throw new Error(
+      `Prop \`shrink\` passed to \`OuiFlexItem\` must be a boolean or an integer between 1 and 10, received \`${value}\``
+    );
+  }
+}
+
+function validateBasisValue(value: OuiFlexItemProps['basis']) {
+  // Define the valid values for 'flex-basis'. These can be 'auto' or specific percentages.
+  const validValues = [null, undefined, true, false, ...BASIS_VALUES];
+
+  // Check if the passed value is one of the valid values.
+  if (!validValues.includes(value)) {
+    throw new Error(
+      `Prop \`basis\` passed to \`OuiFlexItem\` must be one of ['auto', '0%', '25%', '50%', '75%', '100%'], received \`${value}\``
+    );
+  }
+}

From 0cf7375d4e4a298db145dd5141f96d08761af064 Mon Sep 17 00:00:00 2001
From: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
Date: Fri, 27 Oct 2023 14:02:03 +0100
Subject: [PATCH 02/24] adding tests for shrink and basis props added in
 OuiFlexItem

Signed-off-by: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
---
 .../__snapshots__/flex_item.test.tsx.snap     | 72 +++++++++++++++++++
 src/components/flex/flex_item.test.tsx        | 22 +++++-
 src/components/flex/flex_item.tsx             | 17 ++++-
 3 files changed, 107 insertions(+), 4 deletions(-)

diff --git a/src/components/flex/__snapshots__/flex_item.test.tsx.snap b/src/components/flex/__snapshots__/flex_item.test.tsx.snap
index e516a31ce9..05e9fecac0 100644
--- a/src/components/flex/__snapshots__/flex_item.test.tsx.snap
+++ b/src/components/flex/__snapshots__/flex_item.test.tsx.snap
@@ -79,3 +79,75 @@ exports[`OuiFlexItem is rendered 1`] = `
   data-test-subj="test subject string"
 />
 `;
+
+exports[`OuiFlexItem shrink 1 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink1"
+/>
+`;
+
+exports[`OuiFlexItem shrink 2 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink2"
+/>
+`;
+
+exports[`OuiFlexItem shrink 3 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink3"
+/>
+`;
+
+exports[`OuiFlexItem shrink 4 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink4"
+/>
+`;
+
+exports[`OuiFlexItem shrink 5 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink5"
+/>
+`;
+
+exports[`OuiFlexItem shrink 6 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink6"
+/>
+`;
+
+exports[`OuiFlexItem shrink 7 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink7"
+/>
+`;
+
+exports[`OuiFlexItem shrink 8 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink8"
+/>
+`;
+
+exports[`OuiFlexItem shrink 9 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink9"
+/>
+`;
+
+exports[`OuiFlexItem shrink 10 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink10"
+/>
+`;
+
+exports[`OuiFlexItem shrink false is rendered 1`] = `
+<div
+  class="ouiFlexItem"
+/>
+`;
+
+exports[`OuiFlexItem shrink true is rendered 1`] = `
+<div
+  class="ouiFlexItem"
+/>
+`;
diff --git a/src/components/flex/flex_item.test.tsx b/src/components/flex/flex_item.test.tsx
index d6b5781c80..ee5a11f69a 100644
--- a/src/components/flex/flex_item.test.tsx
+++ b/src/components/flex/flex_item.test.tsx
@@ -36,7 +36,7 @@ import {
   stopThrowingReactWarnings,
 } from '../../test';
 
-import { OuiFlexItem, GROW_SIZES } from './flex_item';
+import { OuiFlexItem, GROW_SIZES, SHRINK_SIZES, BASIS_VALUES } from './flex_item';
 
 beforeAll(startThrowingReactWarnings);
 afterAll(stopThrowingReactWarnings);
@@ -57,4 +57,24 @@ describe('OuiFlexItem', () => {
       });
     });
   });
+
+  describe('shrink', () => {
+    SHRINK_SIZES.forEach((value) => {
+      test(`${value} is rendered`, () => {
+        const component = render(<OuiFlexItem shrink={value} />);
+
+        expect(component).toMatchSnapshot();
+      });
+    });
+  });
+
+  describe('basis', () => {
+    BASIS_VALUES.forEach((value) => {
+      test(`${value} is rendered`, () => {
+        const component = render(<OuiFlexItem basis={value} />);
+
+        expect(component).toMatchSnapshot();
+      });
+    });
+  });
 });
diff --git a/src/components/flex/flex_item.tsx b/src/components/flex/flex_item.tsx
index f77a4d2d6a..665fa530a1 100644
--- a/src/components/flex/flex_item.tsx
+++ b/src/components/flex/flex_item.tsx
@@ -82,7 +82,14 @@ export const SHRINK_SIZES: FlexItemShrinkSize[] = [
   9,
   10,
 ];
-export const BASIS_VALUES:FlexItemBasisValue[] = ['auto','0%','25%','50%','75%','100%']
+export const BASIS_VALUES: FlexItemBasisValue[] = [
+  'auto',
+  '0%',
+  '25%',
+  '50%',
+  '75%',
+  '100%',
+];
 
 export const OuiFlexItem: FunctionComponent<
   CommonProps &
@@ -108,9 +115,13 @@ export const OuiFlexItem: FunctionComponent<
       [`ouiFlexItem--flexGrow${grow}`]:
         typeof grow === 'number' ? GROW_SIZES.indexOf(grow) >= 0 : undefined,
       [`ouiFlexItem--flexShrink${shrink}`]:
-        typeof shrink === 'number' ? SHRINK_SIZES.indexOf(shrink) >= 0 : undefined,
+        typeof shrink === 'number'
+          ? SHRINK_SIZES.indexOf(shrink) >= 0
+          : undefined,
       [`ouiFlexItem--flexBasis${basis}`]:
-        typeof shrink === 'string' ? BASIS_VALUES.indexOf(shrink) >= 0 : undefined,
+        typeof shrink === 'string'
+          ? BASIS_VALUES.indexOf(shrink) >= 0
+          : undefined,
     },
     className
   );

From fe285565c94fa688ffae751310958f22633f7acf Mon Sep 17 00:00:00 2001
From: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
Date: Sat, 28 Oct 2023 13:30:33 +0100
Subject: [PATCH 03/24] changing API for values accepted for basis prop and
 updating snapshoots tests for testing

Signed-off-by: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
---
 .../__snapshots__/flex_item.test.tsx.snap     | 62 +++++++++++--------
 src/components/flex/_flex_item.scss           | 11 +++-
 src/components/flex/flex_item.test.tsx        |  7 ++-
 src/components/flex/flex_item.tsx             |  9 ++-
 4 files changed, 55 insertions(+), 34 deletions(-)

diff --git a/src/components/flex/__snapshots__/flex_item.test.tsx.snap b/src/components/flex/__snapshots__/flex_item.test.tsx.snap
index 05e9fecac0..12443cdc61 100644
--- a/src/components/flex/__snapshots__/flex_item.test.tsx.snap
+++ b/src/components/flex/__snapshots__/flex_item.test.tsx.snap
@@ -1,81 +1,105 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`OuiFlexItem basis auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink1"
+/>
+`;
+
+exports[`OuiFlexItem basis fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink1"
+/>
+`;
+
+exports[`OuiFlexItem basis max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink1"
+/>
+`;
+
+exports[`OuiFlexItem basis min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink1"
+/>
+`;
+
 exports[`OuiFlexItem grow 1 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexGrow1"
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink1"
 />
 `;
 
 exports[`OuiFlexItem grow 2 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexGrow2"
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink1"
 />
 `;
 
 exports[`OuiFlexItem grow 3 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexGrow3"
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink1"
 />
 `;
 
 exports[`OuiFlexItem grow 4 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexGrow4"
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink1"
 />
 `;
 
 exports[`OuiFlexItem grow 5 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexGrow5"
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink1"
 />
 `;
 
 exports[`OuiFlexItem grow 6 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexGrow6"
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink1"
 />
 `;
 
 exports[`OuiFlexItem grow 7 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexGrow7"
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink1"
 />
 `;
 
 exports[`OuiFlexItem grow 8 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexGrow8"
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink1"
 />
 `;
 
 exports[`OuiFlexItem grow 9 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexGrow9"
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink1"
 />
 `;
 
 exports[`OuiFlexItem grow 10 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexGrow10"
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink1"
 />
 `;
 
 exports[`OuiFlexItem grow false is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexGrowZero"
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
 />
 `;
 
 exports[`OuiFlexItem grow true is rendered 1`] = `
 <div
-  class="ouiFlexItem"
+  class="ouiFlexItem ouiFlexItem--flexShrink1"
 />
 `;
 
 exports[`OuiFlexItem is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="ouiFlexItem testClass1 testClass2"
+  class="ouiFlexItem ouiFlexItem--flexShrink1 testClass1 testClass2"
   data-test-subj="test subject string"
 />
 `;
@@ -139,15 +163,3 @@ exports[`OuiFlexItem shrink 10 is rendered 1`] = `
   class="ouiFlexItem ouiFlexItem--flexShrink10"
 />
 `;
-
-exports[`OuiFlexItem shrink false is rendered 1`] = `
-<div
-  class="ouiFlexItem"
-/>
-`;
-
-exports[`OuiFlexItem shrink true is rendered 1`] = `
-<div
-  class="ouiFlexItem"
-/>
-`;
diff --git a/src/components/flex/_flex_item.scss b/src/components/flex/_flex_item.scss
index d9e0a1c4a6..9d5ef5a75e 100644
--- a/src/components/flex/_flex_item.scss
+++ b/src/components/flex/_flex_item.scss
@@ -24,11 +24,11 @@
 
   /*
    * 1. We need the extra specificity here to override the FlexGroup > FlexItem styles.
-   * 2. FlexItem can be manually set to not grow if needed (default).
+   * 2. FlexItem can be manually set to not grow or shrink if needed (default).
    * 3. FlexItem also can be given values for grow, shrink and basis:
    *    - grow: 1..10
    *    - shrink: 1..10
-   *    - basis: auto, 0%, 25%, 50%, 75% or 100%
+   *    - basis: auto, max-content, min-content, fit-content
    */
 
   &.ouiFlexItem--flexGrowZero { /* 1 */
@@ -36,6 +36,11 @@
     flex-basis: auto; /* 2 */
   }
 
+  &.ouiFlexItem--flexShrinkZero { /* 1 */
+    flex-grow: 0; /* 2 */
+    flex-basis: auto; /* 2 */
+  }
+
   @for $i from 1 through 10 { /* 3 */
     &.ouiFlexItem--flexGrow#{$i} { /* 3 */
       flex-grow: $i; /* 3 */
@@ -48,7 +53,7 @@
     }
   }
 
-  $flexBasisOptions: 'auto', '0%', '25%', '50%', '75%', '100%'; /* 3 */
+  $flexBasisOptions: 'auto', 'max-content', 'min-content', 'fit-content'; /* 3 */
 
   @each $basis in $flexBasisOptions { /* 3 */
     .ouiFlexItem--flexBasis#{$basis} { /* 3 */
diff --git a/src/components/flex/flex_item.test.tsx b/src/components/flex/flex_item.test.tsx
index ee5a11f69a..279edf938e 100644
--- a/src/components/flex/flex_item.test.tsx
+++ b/src/components/flex/flex_item.test.tsx
@@ -36,7 +36,12 @@ import {
   stopThrowingReactWarnings,
 } from '../../test';
 
-import { OuiFlexItem, GROW_SIZES, SHRINK_SIZES, BASIS_VALUES } from './flex_item';
+import {
+  OuiFlexItem,
+  GROW_SIZES,
+  SHRINK_SIZES,
+  BASIS_VALUES,
+} from './flex_item';
 
 beforeAll(startThrowingReactWarnings);
 afterAll(stopThrowingReactWarnings);
diff --git a/src/components/flex/flex_item.tsx b/src/components/flex/flex_item.tsx
index 665fa530a1..2cb47d7047 100644
--- a/src/components/flex/flex_item.tsx
+++ b/src/components/flex/flex_item.tsx
@@ -84,11 +84,9 @@ export const SHRINK_SIZES: FlexItemShrinkSize[] = [
 ];
 export const BASIS_VALUES: FlexItemBasisValue[] = [
   'auto',
-  '0%',
-  '25%',
-  '50%',
-  '75%',
-  '100%',
+  'max-content',
+  'min-content',
+  'fit-content',
 ];
 
 export const OuiFlexItem: FunctionComponent<
@@ -112,6 +110,7 @@ export const OuiFlexItem: FunctionComponent<
     'ouiFlexItem',
     {
       'ouiFlexItem--flexGrowZero': !grow,
+      'ouiFlexItem--flexShrinkZero': !shrink,
       [`ouiFlexItem--flexGrow${grow}`]:
         typeof grow === 'number' ? GROW_SIZES.indexOf(grow) >= 0 : undefined,
       [`ouiFlexItem--flexShrink${shrink}`]:

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 04/24] 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"

From 3eb74136a0638d8f7a5ab4c1e9d6d26d08093c71 Mon Sep 17 00:00:00 2001
From: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
Date: Wed, 1 Nov 2023 18:28:41 +0000
Subject: [PATCH 05/24] changing location of chanelog description for this
 issue into correct place

Signed-off-by: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
---
 CHANGELOG.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ab9b98a073..d92e634222 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@
 - Update ouiTextSubduedColor in `next` dark theme ([#973](https://github.com/opensearch-project/oui/pull/973))
 - Add `crossInCircleEmpty` and `power` icons ([#1044](https://github.com/opensearch-project/oui/pull/1044))
 - Add `Figma` icon and link to OUI Figma resources ([#1064](https://github.com/opensearch-project/oui/pull/1064))
+- Add `shrink` and `basis` props to OuiFlexItem ([#1126](https://github.com/opensearch-project/oui/pull/1126))
 
 ### 🐛 Bug Fixes
 
@@ -58,7 +59,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
 

From 428ef630f1e5c559e37c427ca1407ab6f41b1542 Mon Sep 17 00:00:00 2001
From: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
Date: Wed, 1 Nov 2023 19:26:34 +0000
Subject: [PATCH 06/24] fixing typo lines 122 and 123 flexItem.tsx

Signed-off-by: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
---
 src/components/flex/flex_item.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/flex/flex_item.tsx b/src/components/flex/flex_item.tsx
index 2cb47d7047..49c6d5afd8 100644
--- a/src/components/flex/flex_item.tsx
+++ b/src/components/flex/flex_item.tsx
@@ -118,8 +118,8 @@ export const OuiFlexItem: FunctionComponent<
           ? SHRINK_SIZES.indexOf(shrink) >= 0
           : undefined,
       [`ouiFlexItem--flexBasis${basis}`]:
-        typeof shrink === 'string'
-          ? BASIS_VALUES.indexOf(shrink) >= 0
+        typeof basis === 'string'
+          ? BASIS_VALUES.indexOf(basis) >= 0
           : undefined,
     },
     className

From eb68e2c6152462946ba7c02d7ab03cc5da108ed1 Mon Sep 17 00:00:00 2001
From: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
Date: Wed, 1 Nov 2023 19:34:49 +0000
Subject: [PATCH 07/24] fixing typo line 55 file _flex_item.scss

Signed-off-by: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
---
 src/components/flex/_flex_item.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/flex/_flex_item.scss b/src/components/flex/_flex_item.scss
index 9d5ef5a75e..497fd1f33a 100644
--- a/src/components/flex/_flex_item.scss
+++ b/src/components/flex/_flex_item.scss
@@ -53,7 +53,7 @@
     }
   }
 
-  $flexBasisOptions: 'auto', 'max-content', 'min-content', 'fit-content'; /* 3 */
+  $flexBasisOptions: auto, max-content, min-content, fit-content; /* 3 */
 
   @each $basis in $flexBasisOptions { /* 3 */
     .ouiFlexItem--flexBasis#{$basis} { /* 3 */

From 9665bbaf35063a17feac2fa664b5a19de304002a Mon Sep 17 00:00:00 2001
From: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
Date: Wed, 1 Nov 2023 20:27:54 +0000
Subject: [PATCH 08/24] updating jest unit-testing snapshoots

Signed-off-by: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
---
 .../__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 +-
 .../__snapshots__/flex_item.test.tsx.snap     | 54 +++++++-------
 src/components/flex/_flex_item.scss           |  2 +-
 src/components/flex/flex_item.tsx             |  2 +-
 .../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 +-
 17 files changed, 185 insertions(+), 185 deletions(-)

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 521e1f2f69..e117140093 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 ouiFlexItem--flexShrink1"
+                  className="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
                 >
                   <OuiI18n
                     default="Select all rows"
@@ -1510,7 +1510,7 @@ exports[`OuiBasicTable with initial selection 1`] = `
                 grow={false}
               >
                 <div
-                  className="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+                  className="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
                 />
               </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 8901d96306..7d27dd2e11 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 ouiFlexItem--flexShrink1"
+                    className="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
                   />
                 </OuiFlexItem>
                 <OuiFlexItem
                   grow={false}
                 >
                   <div
-                    className="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+                    className="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
                   />
                 </OuiFlexItem>
               </div>
@@ -355,7 +355,7 @@ exports[`OuiInMemoryTable behavior pagination 1`] = `
                   grow={false}
                 >
                   <div
-                    className="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+                    className="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
                   >
                     <OuiPopover
                       anchorPosition="upRight"
@@ -456,7 +456,7 @@ exports[`OuiInMemoryTable behavior pagination 1`] = `
                   grow={false}
                 >
                   <div
-                    className="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+                    className="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
                   >
                     <OuiPagination
                       activePage={1}
@@ -904,7 +904,7 @@ exports[`OuiInMemoryTable with initial selection 1`] = `
                   grow={false}
                 >
                   <div
-                    className="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+                    className="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
                   >
                     <OuiI18n
                       default="Select all rows"
@@ -950,7 +950,7 @@ exports[`OuiInMemoryTable with initial selection 1`] = `
                   grow={false}
                 >
                   <div
-                    className="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+                    className="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
                   />
                 </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 260db66d1e..76881eb44a 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 ouiFlexItem--flexShrink1"
+        class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
       >
         <span
           data-ouiicon-type="bolt"
@@ -50,7 +50,7 @@ exports[`OuiCollapsibleNavGroup props iconProps renders data-test-subj 1`] = `
         />
       </div>
       <div
-        class="ouiFlexItem ouiFlexItem--flexShrink1"
+        class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
       >
         <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 ouiFlexItem--flexShrink1"
+        class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
       >
         <span
           data-ouiicon-type="bolt"
         />
       </div>
       <div
-        class="ouiFlexItem ouiFlexItem--flexShrink1"
+        class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
       >
         <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 ouiFlexItem--flexShrink1"
+        class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
       >
         <span
           data-ouiicon-type="bolt"
         />
       </div>
       <div
-        class="ouiFlexItem ouiFlexItem--flexShrink1"
+        class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
       >
         <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 ouiFlexItem--flexShrink1"
+        class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
       >
         <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 ouiFlexItem--flexShrink1"
+        class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
       >
         <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 ouiFlexItem--flexShrink1"
+            class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
           >
             <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 ouiFlexItem--flexShrink1"
+            class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
           >
             <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 3102351413..a076c1cd99 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 ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <button
         aria-label="Select #54B399 as the color"
@@ -814,7 +814,7 @@ exports[`renders inline OuiColorPicker 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <button
         aria-label="Select #6092C0 as the color"
@@ -825,7 +825,7 @@ exports[`renders inline OuiColorPicker 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <button
         aria-label="Select #D36086 as the color"
@@ -836,7 +836,7 @@ exports[`renders inline OuiColorPicker 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <button
         aria-label="Select #9170B8 as the color"
@@ -847,7 +847,7 @@ exports[`renders inline OuiColorPicker 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <button
         aria-label="Select #CA8EAE as the color"
@@ -858,7 +858,7 @@ exports[`renders inline OuiColorPicker 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <button
         aria-label="Select #D6BF57 as the color"
@@ -869,7 +869,7 @@ exports[`renders inline OuiColorPicker 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <button
         aria-label="Select #B9A888 as the color"
@@ -880,7 +880,7 @@ exports[`renders inline OuiColorPicker 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <button
         aria-label="Select #DA8B45 as the color"
@@ -891,7 +891,7 @@ exports[`renders inline OuiColorPicker 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <button
         aria-label="Select #AA6556 as the color"
@@ -902,7 +902,7 @@ exports[`renders inline OuiColorPicker 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <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 ad711abadb..ac9a72db28 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 ouiFlexItem--flexShrink1 ouiFilterSelectItem__content"
+                class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto 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 ouiFlexItem--flexShrink1 ouiFilterSelectItem__content"
+                class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto 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 ouiFlexItem--flexShrink1 ouiFilterSelectItem__content"
+                class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto 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 ouiFlexItem--flexShrink1 ouiFilterSelectItem__content"
+                class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto 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 ouiFlexItem--flexShrink1 ouiFilterSelectItem__content"
+                class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto 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 ouiFlexItem--flexShrink1 ouiFilterSelectItem__content"
+                class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto 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 ouiFlexItem--flexShrink1 ouiFilterSelectItem__content"
+                class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto 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 ouiFlexItem--flexShrink1 ouiFilterSelectItem__content"
+                class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto 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 ouiFlexItem--flexShrink1 ouiFilterSelectItem__content"
+                class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto 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 4af39d3118..eba7bfd70f 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 ouiFlexItem--flexShrink1"
+    class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
   >
     <div
       class="ouiPopover ouiPopover--anchorUpRight"
@@ -37,7 +37,7 @@ exports[`OuiDataGrid pagination renders 1`] = `
     </div>
   </div>
   <div
-    class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+    class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
   >
     <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 ed9ad02a64..574ae3b195 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 ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       action1
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       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 51a87ddb4a..56d333bd05 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 ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <span
         data-ouiicon-type="empty"
       />
     </div>
     <span
-      class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFilterSelectItem__content"
+      class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto ouiFilterSelectItem__content"
     />
   </span>
 </button>
diff --git a/src/components/flex/__snapshots__/flex_item.test.tsx.snap b/src/components/flex/__snapshots__/flex_item.test.tsx.snap
index 12443cdc61..0b875a5078 100644
--- a/src/components/flex/__snapshots__/flex_item.test.tsx.snap
+++ b/src/components/flex/__snapshots__/flex_item.test.tsx.snap
@@ -2,164 +2,164 @@
 
 exports[`OuiFlexItem basis auto is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexShrink1"
+  class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
 />
 `;
 
 exports[`OuiFlexItem basis fit-content is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexShrink1"
+  class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-fit-content"
 />
 `;
 
 exports[`OuiFlexItem basis max-content is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexShrink1"
+  class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-max-content"
 />
 `;
 
 exports[`OuiFlexItem basis min-content is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexShrink1"
+  class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-min-content"
 />
 `;
 
 exports[`OuiFlexItem grow 1 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink1"
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
 />
 `;
 
 exports[`OuiFlexItem grow 2 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink1"
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
 />
 `;
 
 exports[`OuiFlexItem grow 3 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink1"
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
 />
 `;
 
 exports[`OuiFlexItem grow 4 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink1"
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
 />
 `;
 
 exports[`OuiFlexItem grow 5 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink1"
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
 />
 `;
 
 exports[`OuiFlexItem grow 6 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink1"
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
 />
 `;
 
 exports[`OuiFlexItem grow 7 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink1"
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
 />
 `;
 
 exports[`OuiFlexItem grow 8 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink1"
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
 />
 `;
 
 exports[`OuiFlexItem grow 9 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink1"
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
 />
 `;
 
 exports[`OuiFlexItem grow 10 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink1"
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
 />
 `;
 
 exports[`OuiFlexItem grow false is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
 />
 `;
 
 exports[`OuiFlexItem grow true is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexShrink1"
+  class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
 />
 `;
 
 exports[`OuiFlexItem is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="ouiFlexItem ouiFlexItem--flexShrink1 testClass1 testClass2"
+  class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto testClass1 testClass2"
   data-test-subj="test subject string"
 />
 `;
 
 exports[`OuiFlexItem shrink 1 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexShrink1"
+  class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
 />
 `;
 
 exports[`OuiFlexItem shrink 2 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexShrink2"
+  class="ouiFlexItem ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-auto"
 />
 `;
 
 exports[`OuiFlexItem shrink 3 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexShrink3"
+  class="ouiFlexItem ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-auto"
 />
 `;
 
 exports[`OuiFlexItem shrink 4 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexShrink4"
+  class="ouiFlexItem ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-auto"
 />
 `;
 
 exports[`OuiFlexItem shrink 5 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexShrink5"
+  class="ouiFlexItem ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-auto"
 />
 `;
 
 exports[`OuiFlexItem shrink 6 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexShrink6"
+  class="ouiFlexItem ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-auto"
 />
 `;
 
 exports[`OuiFlexItem shrink 7 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexShrink7"
+  class="ouiFlexItem ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-auto"
 />
 `;
 
 exports[`OuiFlexItem shrink 8 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexShrink8"
+  class="ouiFlexItem ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-auto"
 />
 `;
 
 exports[`OuiFlexItem shrink 9 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexShrink9"
+  class="ouiFlexItem ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-auto"
 />
 `;
 
 exports[`OuiFlexItem shrink 10 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexShrink10"
+  class="ouiFlexItem ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-auto"
 />
 `;
diff --git a/src/components/flex/_flex_item.scss b/src/components/flex/_flex_item.scss
index 497fd1f33a..c98cd355c1 100644
--- a/src/components/flex/_flex_item.scss
+++ b/src/components/flex/_flex_item.scss
@@ -56,7 +56,7 @@
   $flexBasisOptions: auto, max-content, min-content, fit-content; /* 3 */
 
   @each $basis in $flexBasisOptions { /* 3 */
-    .ouiFlexItem--flexBasis#{$basis} { /* 3 */
+    &.ouiFlexItem--flexBasis-#{$basis} { /* 3 */
       flex-basis: $basis; /* 3 */
     }
   }
diff --git a/src/components/flex/flex_item.tsx b/src/components/flex/flex_item.tsx
index 49c6d5afd8..2b8f90740f 100644
--- a/src/components/flex/flex_item.tsx
+++ b/src/components/flex/flex_item.tsx
@@ -117,7 +117,7 @@ export const OuiFlexItem: FunctionComponent<
         typeof shrink === 'number'
           ? SHRINK_SIZES.indexOf(shrink) >= 0
           : undefined,
-      [`ouiFlexItem--flexBasis${basis}`]:
+      [`ouiFlexItem--flexBasis-${basis}`]:
         typeof basis === 'string'
           ? BASIS_VALUES.indexOf(basis) >= 0
           : undefined,
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 bc1ddef3fd..0b3a156ed5 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 ouiFlexItem--flexShrink1"
+            className="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
           >
             <OuiTitle
               className="ouiDescribedFormGroup__title"
@@ -64,7 +64,7 @@ exports[`OuiDescribedFormGroup is rendered 1`] = `
           className="ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--xsmall"
         >
           <div
-            className="ouiFlexItem ouiFlexItem--flexShrink1 ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--xsmall"
+            className="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto 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 ouiFlexItem--flexShrink1"
+            className="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
           >
             <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 ouiFlexItem--flexShrink1 ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--xsmall"
+            className="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--xsmall"
           >
             <OuiFormRow
               describedByIds={Array []}
@@ -200,7 +200,7 @@ exports[`OuiDescribedFormGroup props fullWidth is rendered 1`] = `
       >
         <OuiFlexItem>
           <div
-            className="ouiFlexItem ouiFlexItem--flexShrink1"
+            className="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
           >
             <OuiTitle
               className="ouiDescribedFormGroup__title"
@@ -238,7 +238,7 @@ exports[`OuiDescribedFormGroup props fullWidth is rendered 1`] = `
           className="ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--xsmall"
         >
           <div
-            className="ouiFlexItem ouiFlexItem--flexShrink1 ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--xsmall"
+            className="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--xsmall"
           >
             <OuiFormRow
               describedByIds={Array []}
@@ -298,7 +298,7 @@ exports[`OuiDescribedFormGroup props gutterSize is rendered 1`] = `
       >
         <OuiFlexItem>
           <div
-            className="ouiFlexItem ouiFlexItem--flexShrink1"
+            className="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
           >
             <OuiTitle
               className="ouiDescribedFormGroup__title"
@@ -336,7 +336,7 @@ exports[`OuiDescribedFormGroup props gutterSize is rendered 1`] = `
           className="ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--xsmall"
         >
           <div
-            className="ouiFlexItem ouiFlexItem--flexShrink1 ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--xsmall"
+            className="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto 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 ouiFlexItem--flexShrink1"
+            className="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
           >
             <OuiTitle
               className="ouiDescribedFormGroup__title"
@@ -446,7 +446,7 @@ exports[`OuiDescribedFormGroup props props for the flex item containers are pass
           component="section"
         >
           <section
-            className="ouiFlexItem ouiFlexItem--flexShrink1 ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--xsmall"
+            className="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--xsmall"
           >
             <OuiFormRow
               describedByIds={Array []}
@@ -506,7 +506,7 @@ exports[`OuiDescribedFormGroup props titleSize is rendered 1`] = `
       >
         <OuiFlexItem>
           <div
-            className="ouiFlexItem ouiFlexItem--flexShrink1"
+            className="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
           >
             <OuiTitle
               className="ouiDescribedFormGroup__title"
@@ -544,7 +544,7 @@ exports[`OuiDescribedFormGroup props titleSize is rendered 1`] = `
           className="ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--large"
         >
           <div
-            className="ouiFlexItem ouiFlexItem--flexShrink1 ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--large"
+            className="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--large"
           >
             <OuiFormRow
               describedByIds={Array []}
@@ -603,7 +603,7 @@ exports[`OuiDescribedFormGroup ties together parts for accessibility 1`] = `
       >
         <OuiFlexItem>
           <div
-            className="ouiFlexItem ouiFlexItem--flexShrink1"
+            className="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
           >
             <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 ouiFlexItem--flexShrink1 ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--xsmall"
+            className="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto 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 0b6edb79a8..5ec9948404 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 ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <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 ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <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 ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <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 ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <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 99c2bfd79c..931df37362 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 ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <span
         data-ouiicon-type="dot"
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     />
   </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 ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <span
         color="#000000"
@@ -39,7 +39,7 @@ exports[`OuiHealth props color #000000 is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     />
   </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 ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <span
         color="accent"
@@ -61,7 +61,7 @@ exports[`OuiHealth props color accent is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     />
   </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 ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <span
         color="danger"
@@ -83,7 +83,7 @@ exports[`OuiHealth props color danger is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     />
   </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 ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <span
         color="default"
@@ -105,7 +105,7 @@ exports[`OuiHealth props color default is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     />
   </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 ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <span
         color="ghost"
@@ -127,7 +127,7 @@ exports[`OuiHealth props color ghost is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     />
   </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 ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <span
         color="inherit"
@@ -149,7 +149,7 @@ exports[`OuiHealth props color inherit is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     />
   </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 ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <span
         color="primary"
@@ -171,7 +171,7 @@ exports[`OuiHealth props color primary is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     />
   </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 ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <span
         color="secondary"
@@ -193,7 +193,7 @@ exports[`OuiHealth props color secondary is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     />
   </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 ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <span
         color="subdued"
@@ -215,7 +215,7 @@ exports[`OuiHealth props color subdued is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     />
   </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 ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <span
         color="success"
@@ -237,7 +237,7 @@ exports[`OuiHealth props color success is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     />
   </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 ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <span
         color="text"
@@ -259,7 +259,7 @@ exports[`OuiHealth props color text is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     />
   </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 ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <span
         color="warning"
@@ -281,7 +281,7 @@ exports[`OuiHealth props color warning is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     />
   </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 ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <span
         color="success"
@@ -303,7 +303,7 @@ exports[`OuiHealth props textSize inherit is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     />
   </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 ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <span
         color="success"
@@ -325,7 +325,7 @@ exports[`OuiHealth props textSize m is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     />
   </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 ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <span
         color="success"
@@ -347,7 +347,7 @@ exports[`OuiHealth props textSize s is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     />
   </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 ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <span
         color="success"
@@ -369,7 +369,7 @@ exports[`OuiHealth props textSize xs is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     />
   </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 e90e873630..48d7f3c7d9 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 ouiFlexItem--flexShrink1"
+        class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
       >
         <h1
           class="ouiTitle ouiTitle--large"
@@ -30,20 +30,20 @@ exports[`OuiPageHeader props alignItems bottom is rendered 1`] = `
         </h1>
       </div>
       <div
-        class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+        class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
       >
         <div
           class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--directionRow ouiFlexGroup--wrap ouiPageHeaderContent__rightSideItems"
         >
           <div
-            class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+            class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
           >
             <button>
               Button 1
             </button>
           </div>
           <div
-            class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+            class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
           >
             <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 ouiFlexItem--flexShrink1"
+        class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
       >
         <h1
           class="ouiTitle ouiTitle--large"
@@ -76,20 +76,20 @@ exports[`OuiPageHeader props alignItems center is rendered 1`] = `
         </h1>
       </div>
       <div
-        class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+        class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
       >
         <div
           class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--directionRow ouiFlexGroup--wrap ouiPageHeaderContent__rightSideItems"
         >
           <div
-            class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+            class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
           >
             <button>
               Button 1
             </button>
           </div>
           <div
-            class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+            class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
           >
             <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 ouiFlexItem--flexShrink1"
+        class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
       >
         <h1
           class="ouiTitle ouiTitle--large"
@@ -122,20 +122,20 @@ exports[`OuiPageHeader props alignItems stretch is rendered 1`] = `
         </h1>
       </div>
       <div
-        class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+        class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
       >
         <div
           class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--directionRow ouiFlexGroup--wrap ouiPageHeaderContent__rightSideItems"
         >
           <div
-            class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+            class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
           >
             <button>
               Button 1
             </button>
           </div>
           <div
-            class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+            class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
           >
             <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 ouiFlexItem--flexShrink1"
+        class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
       >
         <h1
           class="ouiTitle ouiTitle--large"
@@ -168,20 +168,20 @@ exports[`OuiPageHeader props alignItems top is rendered 1`] = `
         </h1>
       </div>
       <div
-        class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+        class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
       >
         <div
           class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--directionRow ouiFlexGroup--wrap ouiPageHeaderContent__rightSideItems"
         >
           <div
-            class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+            class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
           >
             <button>
               Button 1
             </button>
           </div>
           <div
-            class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+            class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
           >
             <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 ouiFlexItem--flexShrink1"
+        class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
       >
         <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 ouiFlexItem--flexShrink1"
+        class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
       >
         <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 ouiFlexItem--flexShrink1"
+            class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
           >
             <button>
               Button 1
             </button>
           </div>
           <div
-            class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+            class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
           >
             <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 0fe4cadb8e..348e41a055 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 ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     />
   </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 ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <h1
         class="ouiTitle ouiTitle--large"
@@ -33,20 +33,20 @@ exports[`OuiPageHeaderContent props alignItems bottom is rendered 1`] = `
       </h1>
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <div
         class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--directionRow ouiFlexGroup--wrap ouiPageHeaderContent__rightSideItems"
       >
         <div
-          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
         >
           <button>
             Button 1
           </button>
         </div>
         <div
-          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
         >
           <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 ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <h1
         class="ouiTitle ouiTitle--large"
@@ -75,20 +75,20 @@ exports[`OuiPageHeaderContent props alignItems center is rendered 1`] = `
       </h1>
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <div
         class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--directionRow ouiFlexGroup--wrap ouiPageHeaderContent__rightSideItems"
       >
         <div
-          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
         >
           <button>
             Button 1
           </button>
         </div>
         <div
-          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
         >
           <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 ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <h1
         class="ouiTitle ouiTitle--large"
@@ -117,20 +117,20 @@ exports[`OuiPageHeaderContent props alignItems stretch is rendered 1`] = `
       </h1>
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <div
         class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--directionRow ouiFlexGroup--wrap ouiPageHeaderContent__rightSideItems"
       >
         <div
-          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
         >
           <button>
             Button 1
           </button>
         </div>
         <div
-          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
         >
           <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 ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <h1
         class="ouiTitle ouiTitle--large"
@@ -159,20 +159,20 @@ exports[`OuiPageHeaderContent props alignItems top is rendered 1`] = `
       </h1>
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <div
         class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--directionRow ouiFlexGroup--wrap ouiPageHeaderContent__rightSideItems"
       >
         <div
-          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
         >
           <button>
             Button 1
           </button>
         </div>
         <div
-          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
         >
           <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 ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     />
   </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 ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     />
   </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 ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <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 ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <div
         class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--directionRow ouiFlexGroup--wrap ouiPageHeaderContent__rightSideItems"
       >
         <div
-          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
         >
           <button>
             Button 1
           </button>
         </div>
         <div
-          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
         >
           <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 ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <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 ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <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 ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     />
   </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 ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     />
   </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 ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     />
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <div
         class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--directionRow ouiFlexGroup--wrap ouiPageHeaderContent__rightSideItems"
       >
         <div
-          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
         >
           <button>
             Button 1
           </button>
         </div>
         <div
-          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
         >
           <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 ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     />
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <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 ouiFlexItem--flexShrink1"
+          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
         >
           <button>
             Button 1
           </button>
         </div>
         <div
-          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
         >
           <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 ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <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 ouiFlexItem--flexShrink1"
+      class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
     >
       <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 1bc902ef65..de5a4e32e7 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 ouiFlexItem--flexShrink1"
+    class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
   >
     <div
       class="ouiPopover ouiPopover--anchorUpRight"
@@ -37,7 +37,7 @@ exports[`OuiTablePagination is rendered 1`] = `
     </div>
   </div>
   <div
-    class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+    class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
   >
     <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 ouiFlexItem--flexShrink1"
+    class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
   />
   <div
-    class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+    class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
   >
     <nav
       aria-label="aria-label"

From b8ec51e16ac14bc3a469abc8c8abd9c8d4bd4bc6 Mon Sep 17 00:00:00 2001
From: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
Date: Wed, 1 Nov 2023 20:31:38 +0000
Subject: [PATCH 09/24] changing default values for shrink and basis props

Signed-off-by: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
---
 src/components/flex/flex_item.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/flex/flex_item.tsx b/src/components/flex/flex_item.tsx
index 2b8f90740f..4d923498d6 100644
--- a/src/components/flex/flex_item.tsx
+++ b/src/components/flex/flex_item.tsx
@@ -96,9 +96,9 @@ export const OuiFlexItem: FunctionComponent<
 > = ({
   children,
   className,
-  grow = true, // default true -> keep grow 1 coming from flex_grid
-  shrink = 1, // default 1 for shrink
-  basis = 'auto', // default 'auto' basis
+  grow = true, // default true -> flex-grow: 1 and flex-basis: 0%
+  shrink = null, // default null for flex-shrink
+  basis = null, // default null flex-basis
   component: Component = 'div',
   ...rest
 }) => {

From 8abdb38eda6d15d3c23bc1cbfbcd97c635c99873 Mon Sep 17 00:00:00 2001
From: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
Date: Wed, 1 Nov 2023 22:55:08 +0000
Subject: [PATCH 10/24] removing class .ouiFlexItem--flexShrinkZero from
 _flex_item.scss and flex_item.tsx

Signed-off-by: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
---
 src/components/flex/_flex_item.scss | 5 -----
 src/components/flex/flex_item.tsx   | 3 +--
 2 files changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/components/flex/_flex_item.scss b/src/components/flex/_flex_item.scss
index c98cd355c1..1c42d1760a 100644
--- a/src/components/flex/_flex_item.scss
+++ b/src/components/flex/_flex_item.scss
@@ -36,11 +36,6 @@
     flex-basis: auto; /* 2 */
   }
 
-  &.ouiFlexItem--flexShrinkZero { /* 1 */
-    flex-grow: 0; /* 2 */
-    flex-basis: auto; /* 2 */
-  }
-
   @for $i from 1 through 10 { /* 3 */
     &.ouiFlexItem--flexGrow#{$i} { /* 3 */
       flex-grow: $i; /* 3 */
diff --git a/src/components/flex/flex_item.tsx b/src/components/flex/flex_item.tsx
index 4d923498d6..40ce275128 100644
--- a/src/components/flex/flex_item.tsx
+++ b/src/components/flex/flex_item.tsx
@@ -110,7 +110,6 @@ export const OuiFlexItem: FunctionComponent<
     'ouiFlexItem',
     {
       'ouiFlexItem--flexGrowZero': !grow,
-      'ouiFlexItem--flexShrinkZero': !shrink,
       [`ouiFlexItem--flexGrow${grow}`]:
         typeof grow === 'number' ? GROW_SIZES.indexOf(grow) >= 0 : undefined,
       [`ouiFlexItem--flexShrink${shrink}`]:
@@ -161,7 +160,7 @@ function validateBasisValue(value: OuiFlexItemProps['basis']) {
   // Check if the passed value is one of the valid values.
   if (!validValues.includes(value)) {
     throw new Error(
-      `Prop \`basis\` passed to \`OuiFlexItem\` must be one of ['auto', '0%', '25%', '50%', '75%', '100%'], received \`${value}\``
+      `Prop \`basis\` passed to \`OuiFlexItem\` must be one of ['auto', 'min-content', 'max-content', 'fit-content'], received \`${value}\``
     );
   }
 }

From 34fad9ae090d36386c3733a53712600469e95551 Mon Sep 17 00:00:00 2001
From: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
Date: Wed, 1 Nov 2023 23:00:35 +0000
Subject: [PATCH 11/24] updating documentation for shrink and basis props in
 OuiFlexItem

Signed-off-by: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
---
 src-docs/src/views/flex/flex_basis_string.tsx | 43 ++++++++++
 src-docs/src/views/flex/flex_example.js       | 82 ++++++++++++++++++-
 .../src/views/flex/flex_shrink_numeric.tsx    | 51 ++++++++++++
 3 files changed, 173 insertions(+), 3 deletions(-)
 create mode 100644 src-docs/src/views/flex/flex_basis_string.tsx
 create mode 100644 src-docs/src/views/flex/flex_shrink_numeric.tsx

diff --git a/src-docs/src/views/flex/flex_basis_string.tsx b/src-docs/src/views/flex/flex_basis_string.tsx
new file mode 100644
index 0000000000..b17ab6bd67
--- /dev/null
+++ b/src-docs/src/views/flex/flex_basis_string.tsx
@@ -0,0 +1,43 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import React from 'react';
+
+import { OuiFlexGroup, OuiFlexItem } from '../../../../src/components/flex';
+
+export default () => (
+  <div>
+    <OuiFlexGroup>
+      <OuiFlexItem basis={'auto'}>
+        Auto
+        <br />
+        Varies based on content size or width/height property
+      </OuiFlexItem>
+      <OuiFlexItem basis={'fit-content'}>
+        Fit-content
+        <br />
+        Sizes the item based on the content&apos;s width but within the
+        container.
+      </OuiFlexItem>
+      <OuiFlexItem basis={'max-content'}>
+        Max-content
+        <br />
+        Sizes the item to be as large as the content&apos;s maximum width.
+      </OuiFlexItem>
+      <OuiFlexItem basis={'min-content'}>
+        Min-content
+        <br />
+        Sizes the item to be as small as the content&apos;s minimum width
+        without breaking.
+      </OuiFlexItem>
+    </OuiFlexGroup>
+  </div>
+);
diff --git a/src-docs/src/views/flex/flex_example.js b/src-docs/src/views/flex/flex_example.js
index ff7bcbc9e3..3852430029 100644
--- a/src-docs/src/views/flex/flex_example.js
+++ b/src-docs/src/views/flex/flex_example.js
@@ -47,6 +47,12 @@ const flexGrowZeroSource = require('!!raw-loader!./flex_grow_zero');
 import FlexGrowNumeric from './flex_grow_numeric';
 const flexGrowNumericSource = require('!!raw-loader!./flex_grow_numeric');
 
+import FlexShrinkNumeric from './flex_shrink_numeric';
+const flexShrinkNumericSource = require('!!raw-loader!./flex_shrink_numeric');
+
+import FlexBasisString from './flex_basis_string';
+const FlexBasisStringSource = require('!!raw-loader!./flex_basis_string');
+
 import FlexJustify from './flex_justify';
 const flexJustifySource = require('!!raw-loader!./flex_justify');
 import FlexJustifyBetween from './flex_justify_between';
@@ -105,10 +111,31 @@ const flexGrowZeroSnippet = `<OuiFlexGroup>
 </OuiFlexGroup>`;
 
 const flexGrowNumericSnippet = `<OuiFlexGroup>
-  <OuiFlexItem grow={1}><!-- FlexItem with flew-grow 1 --></OuiFlexItem>
-  <OuiFlexItem grow={2}><!-- FlexItem with flew-grow 2 --></OuiFlexItem>
+  <OuiFlexItem grow={1}><!-- FlexItem with flex-grow 1 --></OuiFlexItem>
+  <OuiFlexItem grow={2}><!-- FlexItem with flex-grow 2 --></OuiFlexItem>
+  ...
+  <OuiFlexItem grow={10}><!-- FlexItem with flex-grow 10 --></OuiFlexItem>
+</OuiFlexGroup>`;
+
+const flexShrinkNumericSnippet = `<OuiFlexGroup>
+  <OuiFlexItem grow={false} shrink={1}><!-- FlexItem with flex-shrink 1 --></OuiFlexItem>
+  <OuiFlexItem grow={false} shrink={2}><!-- FlexItem with flex-shrink 2 --></OuiFlexItem>
   ...
-  <OuiFlexItem grow={10}><!-- FlexItem with flew-grow 10 --></OuiFlexItem>
+  <OuiFlexItem grow={false} shrink={10}><!-- FlexItem with flex-shrink 10 --></OuiFlexItem>
+</OuiFlexGroup>
+
+<OuiFlexGroup>
+  <OuiFlexItem shrink={1} basis={'auto'}><!-- FlexItem with flex-shrink 1 --></OuiFlexItem>
+  <OuiFlexItem shrink={2} basis={'auto'}><!-- FlexItem with flex-shrink 2 --></OuiFlexItem>
+  ...
+  <OuiFlexItem shrink={10} basis={'auto'}><!-- FlexItem with flex-shrink 10 --></OuiFlexItem>
+</OuiFlexGroup>`;
+
+const flexBasisStringSnippet = `<OuiFlexGroup>
+  <OuiFlexItem basis={'auto'}><!-- FlexItem with flex-basis 'auto' --></OuiFlexItem>
+  <OuiFlexItem basis={'fit-content'}><!-- FlexItem with flex-basis 'fit-content' --></OuiFlexItem>
+  <OuiFlexItem basis={'max-content'}><!-- FlexItem with flex-basis 'max-content' --></OuiFlexItem>
+  <OuiFlexItem basis={'min-content'}><!-- FlexItem with flex-basis 'min-content' --></OuiFlexItem>
 </OuiFlexGroup>`;
 
 const directionSnippet = `<OuiFlexGroup direction="column">
@@ -328,6 +355,55 @@ export const FlexExample = {
         </div>
       ),
     },
+    {
+      title: 'Proportional shrinking of items',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: flexShrinkNumericSource,
+        },
+      ],
+      text: (
+        <p>
+          You can specify a number between 1 and 10 for each{' '}
+          <strong>OuiFlexItem</strong> to take up a proportional shrinking of
+          the <strong>OuiFlexGroup</strong> it is in. For this to apply: (1) the
+          prop <strong>grow</strong> should set into <strong>false</strong> or
+          change the <strong>basis</strong> prop to <strong>auto</strong> and
+          (2) the content in the all flex item should be sufficient enough to
+          reach the width of the flex parent.
+        </p>
+      ),
+      snippet: flexShrinkNumericSnippet,
+      demo: (
+        <div className="guideDemo__highlightGrid">
+          <FlexShrinkNumeric />
+        </div>
+      ),
+    },
+    {
+      title: 'Basis of flex items',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: FlexBasisStringSource,
+        },
+      ],
+      text: (
+        <p>
+          You can also specify the <strong>flex-basis</strong> CSS property of a
+          flex item using the <strong>basis</strong> prop with one of the
+          following options: <strong>auto</strong>, <strong>content-fit</strong>
+          , <strong>content-max</strong>, <strong>content-min</strong>
+        </p>
+      ),
+      snippet: flexBasisStringSnippet,
+      demo: (
+        <div className="guideDemo__highlightGrid">
+          <FlexBasisString />
+        </div>
+      ),
+    },
     {
       title: 'Justify and align',
       source: [
diff --git a/src-docs/src/views/flex/flex_shrink_numeric.tsx b/src-docs/src/views/flex/flex_shrink_numeric.tsx
new file mode 100644
index 0000000000..570d0a0f0e
--- /dev/null
+++ b/src-docs/src/views/flex/flex_shrink_numeric.tsx
@@ -0,0 +1,51 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import React from 'react';
+
+import { OuiFlexGroup, OuiFlexItem } from '../../../../src/components/flex';
+import { OuiSpacer } from '../../../../src/components/spacer';
+
+export default () => (
+  <div>
+    <OuiFlexGroup>
+      <OuiFlexItem grow={false} shrink={1}>
+        Extensive Text Extensive Text Extensive Text
+      </OuiFlexItem>
+      <OuiFlexItem grow={false} shrink={2}>
+        Extensive Text Extensive Text Extensive Text
+      </OuiFlexItem>
+      <OuiFlexItem grow={false} shrink={4}>
+        Extensive Text Extensive Text Extensive Text
+      </OuiFlexItem>
+      <OuiFlexItem grow={false} shrink={8}>
+        Extensive Text Extensive Text Extensive Text
+      </OuiFlexItem>
+    </OuiFlexGroup>
+
+    <OuiSpacer />
+
+    <OuiFlexGroup>
+      <OuiFlexItem shrink={1} basis={'auto'}>
+        Extensive Text Extensive Text Extensive Text
+      </OuiFlexItem>
+      <OuiFlexItem shrink={2} basis={'auto'}>
+        Extensive Text Extensive Text Extensive Text
+      </OuiFlexItem>
+      <OuiFlexItem shrink={4} basis={'auto'}>
+        Extensive Text Extensive Text Extensive Text
+      </OuiFlexItem>
+      <OuiFlexItem shrink={8} basis={'auto'}>
+        Extensive Text Extensive Text Extensive Text
+      </OuiFlexItem>
+    </OuiFlexGroup>
+  </div>
+);

From 4674627efe12b35a66b27d9055491b173349f126 Mon Sep 17 00:00:00 2001
From: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
Date: Wed, 1 Nov 2023 23:03:42 +0000
Subject: [PATCH 12/24] updating jest unit-testing snapshoots

Signed-off-by: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
---
 .../__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 +-
 .../__snapshots__/flex_item.test.tsx.snap     | 54 +++++++-------
 .../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, 183 insertions(+), 183 deletions(-)

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 e117140093..85cecb14b7 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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+                  className="ouiFlexItem ouiFlexItem--flexGrowZero"
                 >
                   <OuiI18n
                     default="Select all rows"
@@ -1510,7 +1510,7 @@ exports[`OuiBasicTable with initial selection 1`] = `
                 grow={false}
               >
                 <div
-                  className="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+                  className="ouiFlexItem ouiFlexItem--flexGrowZero"
                 />
               </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 7d27dd2e11..ac72079baf 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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+                    className="ouiFlexItem ouiFlexItem--flexGrowZero"
                   />
                 </OuiFlexItem>
                 <OuiFlexItem
                   grow={false}
                 >
                   <div
-                    className="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+                    className="ouiFlexItem ouiFlexItem--flexGrowZero"
                   />
                 </OuiFlexItem>
               </div>
@@ -355,7 +355,7 @@ exports[`OuiInMemoryTable behavior pagination 1`] = `
                   grow={false}
                 >
                   <div
-                    className="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+                    className="ouiFlexItem ouiFlexItem--flexGrowZero"
                   >
                     <OuiPopover
                       anchorPosition="upRight"
@@ -456,7 +456,7 @@ exports[`OuiInMemoryTable behavior pagination 1`] = `
                   grow={false}
                 >
                   <div
-                    className="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+                    className="ouiFlexItem ouiFlexItem--flexGrowZero"
                   >
                     <OuiPagination
                       activePage={1}
@@ -904,7 +904,7 @@ exports[`OuiInMemoryTable with initial selection 1`] = `
                   grow={false}
                 >
                   <div
-                    className="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+                    className="ouiFlexItem ouiFlexItem--flexGrowZero"
                   >
                     <OuiI18n
                       default="Select all rows"
@@ -950,7 +950,7 @@ exports[`OuiInMemoryTable with initial selection 1`] = `
                   grow={false}
                 >
                   <div
-                    className="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+                    className="ouiFlexItem ouiFlexItem--flexGrowZero"
                   />
                 </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 76881eb44a..339d8f2cac 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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+        class="ouiFlexItem ouiFlexItem--flexGrowZero"
       >
         <span
           data-ouiicon-type="bolt"
@@ -50,7 +50,7 @@ exports[`OuiCollapsibleNavGroup props iconProps renders data-test-subj 1`] = `
         />
       </div>
       <div
-        class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+        class="ouiFlexItem"
       >
         <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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+        class="ouiFlexItem ouiFlexItem--flexGrowZero"
       >
         <span
           data-ouiicon-type="bolt"
         />
       </div>
       <div
-        class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+        class="ouiFlexItem"
       >
         <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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+        class="ouiFlexItem ouiFlexItem--flexGrowZero"
       >
         <span
           data-ouiicon-type="bolt"
         />
       </div>
       <div
-        class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+        class="ouiFlexItem"
       >
         <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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+        class="ouiFlexItem"
       >
         <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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+        class="ouiFlexItem"
       >
         <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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+            class="ouiFlexItem"
           >
             <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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+            class="ouiFlexItem"
           >
             <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 a076c1cd99..60b9554def 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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     >
       <button
         aria-label="Select #54B399 as the color"
@@ -814,7 +814,7 @@ exports[`renders inline OuiColorPicker 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     >
       <button
         aria-label="Select #6092C0 as the color"
@@ -825,7 +825,7 @@ exports[`renders inline OuiColorPicker 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     >
       <button
         aria-label="Select #D36086 as the color"
@@ -836,7 +836,7 @@ exports[`renders inline OuiColorPicker 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     >
       <button
         aria-label="Select #9170B8 as the color"
@@ -847,7 +847,7 @@ exports[`renders inline OuiColorPicker 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     >
       <button
         aria-label="Select #CA8EAE as the color"
@@ -858,7 +858,7 @@ exports[`renders inline OuiColorPicker 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     >
       <button
         aria-label="Select #D6BF57 as the color"
@@ -869,7 +869,7 @@ exports[`renders inline OuiColorPicker 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     >
       <button
         aria-label="Select #B9A888 as the color"
@@ -880,7 +880,7 @@ exports[`renders inline OuiColorPicker 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     >
       <button
         aria-label="Select #DA8B45 as the color"
@@ -891,7 +891,7 @@ exports[`renders inline OuiColorPicker 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     >
       <button
         aria-label="Select #AA6556 as the color"
@@ -902,7 +902,7 @@ exports[`renders inline OuiColorPicker 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     >
       <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 ac9a72db28..f6994d8f67 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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto ouiFilterSelectItem__content"
+                class="ouiFlexItem 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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto ouiFilterSelectItem__content"
+                class="ouiFlexItem 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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto ouiFilterSelectItem__content"
+                class="ouiFlexItem 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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto ouiFilterSelectItem__content"
+                class="ouiFlexItem 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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto ouiFilterSelectItem__content"
+                class="ouiFlexItem 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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto ouiFilterSelectItem__content"
+                class="ouiFlexItem 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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto ouiFilterSelectItem__content"
+                class="ouiFlexItem 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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto ouiFilterSelectItem__content"
+                class="ouiFlexItem 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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto ouiFilterSelectItem__content"
+                class="ouiFlexItem 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 eba7bfd70f..bb537ef767 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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+    class="ouiFlexItem ouiFlexItem--flexGrowZero"
   >
     <div
       class="ouiPopover ouiPopover--anchorUpRight"
@@ -37,7 +37,7 @@ exports[`OuiDataGrid pagination renders 1`] = `
     </div>
   </div>
   <div
-    class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+    class="ouiFlexItem ouiFlexItem--flexGrowZero"
   >
     <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 574ae3b195..2bac2c9da0 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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     >
       action1
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     >
       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 56d333bd05..8271cb6034 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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     >
       <span
         data-ouiicon-type="empty"
       />
     </div>
     <span
-      class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto ouiFilterSelectItem__content"
+      class="ouiFlexItem ouiFilterSelectItem__content"
     />
   </span>
 </button>
diff --git a/src/components/flex/__snapshots__/flex_item.test.tsx.snap b/src/components/flex/__snapshots__/flex_item.test.tsx.snap
index 0b875a5078..7a692589c0 100644
--- a/src/components/flex/__snapshots__/flex_item.test.tsx.snap
+++ b/src/components/flex/__snapshots__/flex_item.test.tsx.snap
@@ -2,164 +2,164 @@
 
 exports[`OuiFlexItem basis auto is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+  class="ouiFlexItem ouiFlexItem--flexBasis-auto"
 />
 `;
 
 exports[`OuiFlexItem basis fit-content is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-fit-content"
+  class="ouiFlexItem ouiFlexItem--flexBasis-fit-content"
 />
 `;
 
 exports[`OuiFlexItem basis max-content is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-max-content"
+  class="ouiFlexItem ouiFlexItem--flexBasis-max-content"
 />
 `;
 
 exports[`OuiFlexItem basis min-content is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-min-content"
+  class="ouiFlexItem ouiFlexItem--flexBasis-min-content"
 />
 `;
 
 exports[`OuiFlexItem grow 1 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+  class="ouiFlexItem ouiFlexItem--flexGrow1"
 />
 `;
 
 exports[`OuiFlexItem grow 2 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+  class="ouiFlexItem ouiFlexItem--flexGrow2"
 />
 `;
 
 exports[`OuiFlexItem grow 3 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+  class="ouiFlexItem ouiFlexItem--flexGrow3"
 />
 `;
 
 exports[`OuiFlexItem grow 4 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+  class="ouiFlexItem ouiFlexItem--flexGrow4"
 />
 `;
 
 exports[`OuiFlexItem grow 5 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+  class="ouiFlexItem ouiFlexItem--flexGrow5"
 />
 `;
 
 exports[`OuiFlexItem grow 6 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+  class="ouiFlexItem ouiFlexItem--flexGrow6"
 />
 `;
 
 exports[`OuiFlexItem grow 7 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+  class="ouiFlexItem ouiFlexItem--flexGrow7"
 />
 `;
 
 exports[`OuiFlexItem grow 8 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+  class="ouiFlexItem ouiFlexItem--flexGrow8"
 />
 `;
 
 exports[`OuiFlexItem grow 9 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+  class="ouiFlexItem ouiFlexItem--flexGrow9"
 />
 `;
 
 exports[`OuiFlexItem grow 10 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+  class="ouiFlexItem ouiFlexItem--flexGrow10"
 />
 `;
 
 exports[`OuiFlexItem grow false is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+  class="ouiFlexItem ouiFlexItem--flexGrowZero"
 />
 `;
 
 exports[`OuiFlexItem grow true is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+  class="ouiFlexItem"
 />
 `;
 
 exports[`OuiFlexItem is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto testClass1 testClass2"
+  class="ouiFlexItem testClass1 testClass2"
   data-test-subj="test subject string"
 />
 `;
 
 exports[`OuiFlexItem shrink 1 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+  class="ouiFlexItem ouiFlexItem--flexShrink1"
 />
 `;
 
 exports[`OuiFlexItem shrink 2 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-auto"
+  class="ouiFlexItem ouiFlexItem--flexShrink2"
 />
 `;
 
 exports[`OuiFlexItem shrink 3 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-auto"
+  class="ouiFlexItem ouiFlexItem--flexShrink3"
 />
 `;
 
 exports[`OuiFlexItem shrink 4 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-auto"
+  class="ouiFlexItem ouiFlexItem--flexShrink4"
 />
 `;
 
 exports[`OuiFlexItem shrink 5 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-auto"
+  class="ouiFlexItem ouiFlexItem--flexShrink5"
 />
 `;
 
 exports[`OuiFlexItem shrink 6 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-auto"
+  class="ouiFlexItem ouiFlexItem--flexShrink6"
 />
 `;
 
 exports[`OuiFlexItem shrink 7 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-auto"
+  class="ouiFlexItem ouiFlexItem--flexShrink7"
 />
 `;
 
 exports[`OuiFlexItem shrink 8 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-auto"
+  class="ouiFlexItem ouiFlexItem--flexShrink8"
 />
 `;
 
 exports[`OuiFlexItem shrink 9 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-auto"
+  class="ouiFlexItem ouiFlexItem--flexShrink9"
 />
 `;
 
 exports[`OuiFlexItem shrink 10 is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-auto"
+  class="ouiFlexItem ouiFlexItem--flexShrink10"
 />
 `;
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 0b3a156ed5..a14d8b6f6e 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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+            className="ouiFlexItem"
           >
             <OuiTitle
               className="ouiDescribedFormGroup__title"
@@ -64,7 +64,7 @@ exports[`OuiDescribedFormGroup is rendered 1`] = `
           className="ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--xsmall"
         >
           <div
-            className="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--xsmall"
+            className="ouiFlexItem 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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+            className="ouiFlexItem"
           >
             <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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--xsmall"
+            className="ouiFlexItem ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--xsmall"
           >
             <OuiFormRow
               describedByIds={Array []}
@@ -200,7 +200,7 @@ exports[`OuiDescribedFormGroup props fullWidth is rendered 1`] = `
       >
         <OuiFlexItem>
           <div
-            className="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+            className="ouiFlexItem"
           >
             <OuiTitle
               className="ouiDescribedFormGroup__title"
@@ -238,7 +238,7 @@ exports[`OuiDescribedFormGroup props fullWidth is rendered 1`] = `
           className="ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--xsmall"
         >
           <div
-            className="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--xsmall"
+            className="ouiFlexItem ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--xsmall"
           >
             <OuiFormRow
               describedByIds={Array []}
@@ -298,7 +298,7 @@ exports[`OuiDescribedFormGroup props gutterSize is rendered 1`] = `
       >
         <OuiFlexItem>
           <div
-            className="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+            className="ouiFlexItem"
           >
             <OuiTitle
               className="ouiDescribedFormGroup__title"
@@ -336,7 +336,7 @@ exports[`OuiDescribedFormGroup props gutterSize is rendered 1`] = `
           className="ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--xsmall"
         >
           <div
-            className="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--xsmall"
+            className="ouiFlexItem 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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+            className="ouiFlexItem ouiFlexItem--flexGrow2"
           >
             <OuiTitle
               className="ouiDescribedFormGroup__title"
@@ -446,7 +446,7 @@ exports[`OuiDescribedFormGroup props props for the flex item containers are pass
           component="section"
         >
           <section
-            className="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--xsmall"
+            className="ouiFlexItem ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--xsmall"
           >
             <OuiFormRow
               describedByIds={Array []}
@@ -506,7 +506,7 @@ exports[`OuiDescribedFormGroup props titleSize is rendered 1`] = `
       >
         <OuiFlexItem>
           <div
-            className="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+            className="ouiFlexItem"
           >
             <OuiTitle
               className="ouiDescribedFormGroup__title"
@@ -544,7 +544,7 @@ exports[`OuiDescribedFormGroup props titleSize is rendered 1`] = `
           className="ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--large"
         >
           <div
-            className="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--large"
+            className="ouiFlexItem ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--large"
           >
             <OuiFormRow
               describedByIds={Array []}
@@ -603,7 +603,7 @@ exports[`OuiDescribedFormGroup ties together parts for accessibility 1`] = `
       >
         <OuiFlexItem>
           <div
-            className="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+            className="ouiFlexItem"
           >
             <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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto ouiDescribedFormGroup__fields ouiDescribedFormGroup__fieldPadding--xsmall"
+            className="ouiFlexItem 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 5ec9948404..4748ed3dc1 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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem"
     >
       <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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem"
     >
       <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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem"
     >
       <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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem"
     >
       <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 931df37362..75f0d990ef 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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     >
       <span
         data-ouiicon-type="dot"
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     />
   </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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     >
       <span
         color="#000000"
@@ -39,7 +39,7 @@ exports[`OuiHealth props color #000000 is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     />
   </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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     >
       <span
         color="accent"
@@ -61,7 +61,7 @@ exports[`OuiHealth props color accent is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     />
   </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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     >
       <span
         color="danger"
@@ -83,7 +83,7 @@ exports[`OuiHealth props color danger is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     />
   </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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     >
       <span
         color="default"
@@ -105,7 +105,7 @@ exports[`OuiHealth props color default is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     />
   </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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     >
       <span
         color="ghost"
@@ -127,7 +127,7 @@ exports[`OuiHealth props color ghost is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     />
   </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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     >
       <span
         color="inherit"
@@ -149,7 +149,7 @@ exports[`OuiHealth props color inherit is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     />
   </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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     >
       <span
         color="primary"
@@ -171,7 +171,7 @@ exports[`OuiHealth props color primary is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     />
   </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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     >
       <span
         color="secondary"
@@ -193,7 +193,7 @@ exports[`OuiHealth props color secondary is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     />
   </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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     >
       <span
         color="subdued"
@@ -215,7 +215,7 @@ exports[`OuiHealth props color subdued is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     />
   </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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     >
       <span
         color="success"
@@ -237,7 +237,7 @@ exports[`OuiHealth props color success is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     />
   </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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     >
       <span
         color="text"
@@ -259,7 +259,7 @@ exports[`OuiHealth props color text is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     />
   </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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     >
       <span
         color="warning"
@@ -281,7 +281,7 @@ exports[`OuiHealth props color warning is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     />
   </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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     >
       <span
         color="success"
@@ -303,7 +303,7 @@ exports[`OuiHealth props textSize inherit is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     />
   </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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     >
       <span
         color="success"
@@ -325,7 +325,7 @@ exports[`OuiHealth props textSize m is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     />
   </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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     >
       <span
         color="success"
@@ -347,7 +347,7 @@ exports[`OuiHealth props textSize s is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     />
   </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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     >
       <span
         color="success"
@@ -369,7 +369,7 @@ exports[`OuiHealth props textSize xs is rendered 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     />
   </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 48d7f3c7d9..85c186b3a0 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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+        class="ouiFlexItem"
       >
         <h1
           class="ouiTitle ouiTitle--large"
@@ -30,20 +30,20 @@ exports[`OuiPageHeader props alignItems bottom is rendered 1`] = `
         </h1>
       </div>
       <div
-        class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+        class="ouiFlexItem ouiFlexItem--flexGrowZero"
       >
         <div
           class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--directionRow ouiFlexGroup--wrap ouiPageHeaderContent__rightSideItems"
         >
           <div
-            class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+            class="ouiFlexItem ouiFlexItem--flexGrowZero"
           >
             <button>
               Button 1
             </button>
           </div>
           <div
-            class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+            class="ouiFlexItem ouiFlexItem--flexGrowZero"
           >
             <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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+        class="ouiFlexItem"
       >
         <h1
           class="ouiTitle ouiTitle--large"
@@ -76,20 +76,20 @@ exports[`OuiPageHeader props alignItems center is rendered 1`] = `
         </h1>
       </div>
       <div
-        class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+        class="ouiFlexItem ouiFlexItem--flexGrowZero"
       >
         <div
           class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--directionRow ouiFlexGroup--wrap ouiPageHeaderContent__rightSideItems"
         >
           <div
-            class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+            class="ouiFlexItem ouiFlexItem--flexGrowZero"
           >
             <button>
               Button 1
             </button>
           </div>
           <div
-            class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+            class="ouiFlexItem ouiFlexItem--flexGrowZero"
           >
             <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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+        class="ouiFlexItem"
       >
         <h1
           class="ouiTitle ouiTitle--large"
@@ -122,20 +122,20 @@ exports[`OuiPageHeader props alignItems stretch is rendered 1`] = `
         </h1>
       </div>
       <div
-        class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+        class="ouiFlexItem ouiFlexItem--flexGrowZero"
       >
         <div
           class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--directionRow ouiFlexGroup--wrap ouiPageHeaderContent__rightSideItems"
         >
           <div
-            class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+            class="ouiFlexItem ouiFlexItem--flexGrowZero"
           >
             <button>
               Button 1
             </button>
           </div>
           <div
-            class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+            class="ouiFlexItem ouiFlexItem--flexGrowZero"
           >
             <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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+        class="ouiFlexItem"
       >
         <h1
           class="ouiTitle ouiTitle--large"
@@ -168,20 +168,20 @@ exports[`OuiPageHeader props alignItems top is rendered 1`] = `
         </h1>
       </div>
       <div
-        class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+        class="ouiFlexItem ouiFlexItem--flexGrowZero"
       >
         <div
           class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--directionRow ouiFlexGroup--wrap ouiPageHeaderContent__rightSideItems"
         >
           <div
-            class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+            class="ouiFlexItem ouiFlexItem--flexGrowZero"
           >
             <button>
               Button 1
             </button>
           </div>
           <div
-            class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+            class="ouiFlexItem ouiFlexItem--flexGrowZero"
           >
             <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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+        class="ouiFlexItem"
       >
         <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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+        class="ouiFlexItem ouiFlexItem--flexGrowZero"
       >
         <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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+            class="ouiFlexItem ouiFlexItem--flexGrowZero"
           >
             <button>
               Button 1
             </button>
           </div>
           <div
-            class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+            class="ouiFlexItem ouiFlexItem--flexGrowZero"
           >
             <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 348e41a055..1210518f23 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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem"
     />
   </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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem"
     >
       <h1
         class="ouiTitle ouiTitle--large"
@@ -33,20 +33,20 @@ exports[`OuiPageHeaderContent props alignItems bottom is rendered 1`] = `
       </h1>
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     >
       <div
         class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--directionRow ouiFlexGroup--wrap ouiPageHeaderContent__rightSideItems"
       >
         <div
-          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+          class="ouiFlexItem ouiFlexItem--flexGrowZero"
         >
           <button>
             Button 1
           </button>
         </div>
         <div
-          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+          class="ouiFlexItem ouiFlexItem--flexGrowZero"
         >
           <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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem"
     >
       <h1
         class="ouiTitle ouiTitle--large"
@@ -75,20 +75,20 @@ exports[`OuiPageHeaderContent props alignItems center is rendered 1`] = `
       </h1>
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     >
       <div
         class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--directionRow ouiFlexGroup--wrap ouiPageHeaderContent__rightSideItems"
       >
         <div
-          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+          class="ouiFlexItem ouiFlexItem--flexGrowZero"
         >
           <button>
             Button 1
           </button>
         </div>
         <div
-          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+          class="ouiFlexItem ouiFlexItem--flexGrowZero"
         >
           <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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem"
     >
       <h1
         class="ouiTitle ouiTitle--large"
@@ -117,20 +117,20 @@ exports[`OuiPageHeaderContent props alignItems stretch is rendered 1`] = `
       </h1>
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     >
       <div
         class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--directionRow ouiFlexGroup--wrap ouiPageHeaderContent__rightSideItems"
       >
         <div
-          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+          class="ouiFlexItem ouiFlexItem--flexGrowZero"
         >
           <button>
             Button 1
           </button>
         </div>
         <div
-          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+          class="ouiFlexItem ouiFlexItem--flexGrowZero"
         >
           <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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem"
     >
       <h1
         class="ouiTitle ouiTitle--large"
@@ -159,20 +159,20 @@ exports[`OuiPageHeaderContent props alignItems top is rendered 1`] = `
       </h1>
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     >
       <div
         class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--directionRow ouiFlexGroup--wrap ouiPageHeaderContent__rightSideItems"
       >
         <div
-          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+          class="ouiFlexItem ouiFlexItem--flexGrowZero"
         >
           <button>
             Button 1
           </button>
         </div>
         <div
-          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+          class="ouiFlexItem ouiFlexItem--flexGrowZero"
         >
           <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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem"
     />
   </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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem"
     />
   </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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem"
     >
       <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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     >
       <div
         class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--directionRow ouiFlexGroup--wrap ouiPageHeaderContent__rightSideItems"
       >
         <div
-          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+          class="ouiFlexItem ouiFlexItem--flexGrowZero"
         >
           <button>
             Button 1
           </button>
         </div>
         <div
-          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+          class="ouiFlexItem ouiFlexItem--flexGrowZero"
         >
           <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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem"
     >
       <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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem"
     >
       <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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem"
     />
   </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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem"
     />
   </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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem"
     />
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     >
       <div
         class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--directionRow ouiFlexGroup--wrap ouiPageHeaderContent__rightSideItems"
       >
         <div
-          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+          class="ouiFlexItem ouiFlexItem--flexGrowZero"
         >
           <button>
             Button 1
           </button>
         </div>
         <div
-          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+          class="ouiFlexItem ouiFlexItem--flexGrowZero"
         >
           <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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem"
     />
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero"
     >
       <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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+          class="ouiFlexItem ouiFlexItem--flexGrowZero"
         >
           <button>
             Button 1
           </button>
         </div>
         <div
-          class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+          class="ouiFlexItem ouiFlexItem--flexGrowZero"
         >
           <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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem"
     >
       <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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+      class="ouiFlexItem"
     >
       <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 de5a4e32e7..70aafd549c 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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+    class="ouiFlexItem ouiFlexItem--flexGrowZero"
   >
     <div
       class="ouiPopover ouiPopover--anchorUpRight"
@@ -37,7 +37,7 @@ exports[`OuiTablePagination is rendered 1`] = `
     </div>
   </div>
   <div
-    class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+    class="ouiFlexItem ouiFlexItem--flexGrowZero"
   >
     <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 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+    class="ouiFlexItem ouiFlexItem--flexGrowZero"
   />
   <div
-    class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+    class="ouiFlexItem ouiFlexItem--flexGrowZero"
   >
     <nav
       aria-label="aria-label"

From 29aff44efc14701442b53b8bd5e8bc136013c0d7 Mon Sep 17 00:00:00 2001
From: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
Date: Sat, 4 Nov 2023 13:16:41 +0000
Subject: [PATCH 13/24] removing extra line CHANELOG.md

Signed-off-by: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
---
 CHANGELOG.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d92e634222..ea579de683 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -60,7 +60,6 @@
 - 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))
 
-
 ### 🐛 Bug Fixes
 
 - Fix blurry text in breadcrumbs by avoiding skewing text ([#959](https://github.com/opensearch-project/oui/pull/959))

From 6914c7d0010e342e362067f226dcbb0086a1272b Mon Sep 17 00:00:00 2001
From: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
Date: Thu, 9 Nov 2023 17:52:42 +0000
Subject: [PATCH 14/24] refactoring code adding after suggestions from code
 review in last PR

Signed-off-by: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
---
 src/components/flex/_flex_group.scss |  1 +
 src/components/flex/_flex_item.scss  | 32 ++++++++++++++++++----------
 src/components/flex/flex_item.tsx    | 16 ++++++++------
 3 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/src/components/flex/_flex_group.scss b/src/components/flex/_flex_group.scss
index 154d08ed95..86d17e2774 100644
--- a/src/components/flex/_flex_group.scss
+++ b/src/components/flex/_flex_group.scss
@@ -25,6 +25,7 @@
     }
 
     flex-grow: 1;
+    flex-shrink: 1;
     flex-basis: 0%; /* 2 */
   }
 }
diff --git a/src/components/flex/_flex_item.scss b/src/components/flex/_flex_item.scss
index 1c42d1760a..9fb5898da4 100644
--- a/src/components/flex/_flex_item.scss
+++ b/src/components/flex/_flex_item.scss
@@ -24,8 +24,9 @@
 
   /*
    * 1. We need the extra specificity here to override the FlexGroup > FlexItem styles.
-   * 2. FlexItem can be manually set to not grow or shrink if needed (default).
-   * 3. FlexItem also can be given values for grow, shrink and basis:
+   * 2. FlexItem can be manually set to not grow or shrink if needed (default allows grow and shrink).
+   * 3. FlexItem basis can be set to 'auto' (defaul use flex-basis: 0%)
+   * 4. FlexItem also can be given values for grow, shrink and basis:
    *    - grow: 1..10
    *    - shrink: 1..10
    *    - basis: auto, max-content, min-content, fit-content
@@ -36,22 +37,31 @@
     flex-basis: auto; /* 2 */
   }
 
-  @for $i from 1 through 10 { /* 3 */
-    &.ouiFlexItem--flexGrow#{$i} { /* 3 */
-      flex-grow: $i; /* 3 */
+  &.ouiFlexItem--flexShrinkZero { /* 1 */
+    flex-shrink: 0; /* 2 */
+    flex-basis: auto; /* 2 */
+  }
+
+  &.ouiFlexItem--flexBasisAuto { /* 1 */
+    flex-basis: auto; /* 3 */
+  }
+
+  @for $i from 1 through 10 { /* 4 */
+    &.ouiFlexItem--flexGrow#{$i} { /* 4 */
+      flex-grow: $i; /* 4 */
     }
   }
 
-  @for $i from 1 through 10 { /* 3 */
-    &.ouiFlexItem--flexShrink#{$i} { /* 3 */
-      flex-shrink: $i; /* 3 */
+  @for $i from 1 through 10 { /* 4 */
+    &.ouiFlexItem--flexShrink#{$i} { /* 4 */
+      flex-shrink: $i; /* 4 */
     }
   }
 
-  $flexBasisOptions: auto, max-content, min-content, fit-content; /* 3 */
+  $flexBasisOptions: auto, max-content, min-content, fit-content; /* 4 */
 
-  @each $basis in $flexBasisOptions { /* 3 */
-    &.ouiFlexItem--flexBasis-#{$basis} { /* 3 */
+  @each $basis in $flexBasisOptions { /* 4 */
+    &.ouiFlexItem--flexBasis-#{$basis} { /* 4 */
       flex-basis: $basis; /* 3 */
     }
   }
diff --git a/src/components/flex/flex_item.tsx b/src/components/flex/flex_item.tsx
index 40ce275128..33795f35d5 100644
--- a/src/components/flex/flex_item.tsx
+++ b/src/components/flex/flex_item.tsx
@@ -96,9 +96,9 @@ export const OuiFlexItem: FunctionComponent<
 > = ({
   children,
   className,
-  grow = true, // default true -> flex-grow: 1 and flex-basis: 0%
-  shrink = null, // default null for flex-shrink
-  basis = null, // default null flex-basis
+  grow = true, // true -> use default behaviour 'flex-grow: 1'
+  shrink = true, //  true -> use default behaviour 'flex-shrink: 1'
+  basis = true, //  true -> use default behaviour 'flex-basis: 0%'
   component: Component = 'div',
   ...rest
 }) => {
@@ -109,15 +109,17 @@ export const OuiFlexItem: FunctionComponent<
   const classes = classNames(
     'ouiFlexItem',
     {
-      'ouiFlexItem--flexGrowZero': !grow,
-      [`ouiFlexItem--flexGrow${grow}`]:
+      'ouiFlexItem--flexGrowZero': !grow, // use flex-grow: 0 and flex-basis: auto
+      'ouiFlexItem--flexShrinkZero': !shrink, // use flex-shrink: 0 and flex-basis: auto
+      'ouiFlexItem--flexBasisAuto': !basis, // use flex-basis: auto
+      [`ouiFlexItem--flexGrow${grow}`]: // use flex-grow: {grow} and flex-basis: auto
         typeof grow === 'number' ? GROW_SIZES.indexOf(grow) >= 0 : undefined,
       [`ouiFlexItem--flexShrink${shrink}`]:
-        typeof shrink === 'number'
+        typeof shrink === 'number' // use flex-shrink: {shrink} and flex-basis: auto
           ? SHRINK_SIZES.indexOf(shrink) >= 0
           : undefined,
       [`ouiFlexItem--flexBasis-${basis}`]:
-        typeof basis === 'string'
+        typeof basis === 'string' // use flex-basis: {basis}
           ? BASIS_VALUES.indexOf(basis) >= 0
           : undefined,
     },

From 345fd2dc21ce4a02b7e6dfccbddd6e7e81aeff99 Mon Sep 17 00:00:00 2001
From: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
Date: Thu, 9 Nov 2023 18:09:44 +0000
Subject: [PATCH 15/24] adding snapshoots for unit-testing

Signed-off-by: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
---
 src/components/flex/flex_item.tsx | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/flex/flex_item.tsx b/src/components/flex/flex_item.tsx
index 33795f35d5..3fc61b4761 100644
--- a/src/components/flex/flex_item.tsx
+++ b/src/components/flex/flex_item.tsx
@@ -109,17 +109,23 @@ export const OuiFlexItem: FunctionComponent<
   const classes = classNames(
     'ouiFlexItem',
     {
-      'ouiFlexItem--flexGrowZero': !grow, // use flex-grow: 0 and flex-basis: auto
-      'ouiFlexItem--flexShrinkZero': !shrink, // use flex-shrink: 0 and flex-basis: auto
-      'ouiFlexItem--flexBasisAuto': !basis, // use flex-basis: auto
-      [`ouiFlexItem--flexGrow${grow}`]: // use flex-grow: {grow} and flex-basis: auto
+      // use flex-grow: 0 and flex-basis: auto
+      'ouiFlexItem--flexGrowZero': !grow,
+      // use flex-shrink: 0 and flex-basis: auto
+      'ouiFlexItem--flexShrinkZero': !shrink,
+      // use flex-basis: auto
+      'ouiFlexItem--flexBasisAuto': !basis,
+      // use flex-grow: {grow} and flex-basis: auto
+      [`ouiFlexItem--flexGrow${grow}`]:
         typeof grow === 'number' ? GROW_SIZES.indexOf(grow) >= 0 : undefined,
+      // use flex-shrink: {shrink} and flex-basis: auto
       [`ouiFlexItem--flexShrink${shrink}`]:
-        typeof shrink === 'number' // use flex-shrink: {shrink} and flex-basis: auto
+        typeof shrink === 'number'
           ? SHRINK_SIZES.indexOf(shrink) >= 0
           : undefined,
+      // use flex-basis: {basis}
       [`ouiFlexItem--flexBasis-${basis}`]:
-        typeof basis === 'string' // use flex-basis: {basis}
+        typeof basis === 'string'
           ? BASIS_VALUES.indexOf(basis) >= 0
           : undefined,
     },

From 8d6e8fa9988bac38b770f0befded9d40851d6487 Mon Sep 17 00:00:00 2001
From: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
Date: Fri, 17 Nov 2023 15:28:12 +0000
Subject: [PATCH 16/24] Adding tests for combinatios of grow, shrink and basis
 values and respective snapshoots

Signed-off-by: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
---
 .../__snapshots__/flex_item.test.tsx.snap     | 4134 ++++++++++++++++-
 src/components/flex/flex_item.test.tsx        |   69 +
 2 files changed, 4200 insertions(+), 3 deletions(-)

diff --git a/src/components/flex/__snapshots__/flex_item.test.tsx.snap b/src/components/flex/__snapshots__/flex_item.test.tsx.snap
index 7a692589c0..28752fdb85 100644
--- a/src/components/flex/__snapshots__/flex_item.test.tsx.snap
+++ b/src/components/flex/__snapshots__/flex_item.test.tsx.snap
@@ -84,15 +84,3903 @@ exports[`OuiFlexItem grow 10 is rendered 1`] = `
 />
 `;
 
+exports[`OuiFlexItem grow and basis combination grow: 1 and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: 1 and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: 1 and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: 1 and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: 2 and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: 2 and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: 2 and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: 2 and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: 3 and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: 3 and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: 3 and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: 3 and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: 4 and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: 4 and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: 4 and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: 4 and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: 5 and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: 5 and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: 5 and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: 5 and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: 6 and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: 6 and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: 6 and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: 6 and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: 7 and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: 7 and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: 7 and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: 7 and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: 8 and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: 8 and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: 8 and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: 8 and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: 9 and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: 9 and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: 9 and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: 9 and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: 10 and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: 10 and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: 10 and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: 10 and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: false and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: false and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: false and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: false and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: true and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: true and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: true and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: true and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 1 and shrink: 1 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink1"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 1 and shrink: 2 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink2"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 1 and shrink: 3 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink3"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 1 and shrink: 4 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink4"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 1 and shrink: 5 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink5"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 1 and shrink: 6 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink6"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 1 and shrink: 7 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink7"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 1 and shrink: 8 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink8"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 1 and shrink: 9 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink9"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 1 and shrink: 10 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink10"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 2 and shrink: 1 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink1"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 2 and shrink: 2 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink2"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 2 and shrink: 3 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink3"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 2 and shrink: 4 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink4"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 2 and shrink: 5 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink5"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 2 and shrink: 6 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink6"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 2 and shrink: 7 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink7"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 2 and shrink: 8 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink8"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 2 and shrink: 9 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink9"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 2 and shrink: 10 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink10"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 3 and shrink: 1 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink1"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 3 and shrink: 2 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink2"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 3 and shrink: 3 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink3"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 3 and shrink: 4 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink4"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 3 and shrink: 5 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink5"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 3 and shrink: 6 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink6"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 3 and shrink: 7 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink7"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 3 and shrink: 8 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink8"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 3 and shrink: 9 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink9"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 3 and shrink: 10 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink10"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 4 and shrink: 1 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink1"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 4 and shrink: 2 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink2"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 4 and shrink: 3 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink3"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 4 and shrink: 4 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink4"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 4 and shrink: 5 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink5"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 4 and shrink: 6 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink6"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 4 and shrink: 7 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink7"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 4 and shrink: 8 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink8"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 4 and shrink: 9 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink9"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 4 and shrink: 10 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink10"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 5 and shrink: 1 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink1"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 5 and shrink: 2 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink2"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 5 and shrink: 3 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink3"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 5 and shrink: 4 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink4"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 5 and shrink: 5 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink5"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 5 and shrink: 6 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink6"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 5 and shrink: 7 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink7"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 5 and shrink: 8 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink8"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 5 and shrink: 9 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink9"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 5 and shrink: 10 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink10"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 6 and shrink: 1 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink1"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 6 and shrink: 2 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink2"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 6 and shrink: 3 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink3"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 6 and shrink: 4 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink4"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 6 and shrink: 5 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink5"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 6 and shrink: 6 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink6"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 6 and shrink: 7 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink7"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 6 and shrink: 8 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink8"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 6 and shrink: 9 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink9"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 6 and shrink: 10 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink10"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 7 and shrink: 1 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink1"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 7 and shrink: 2 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink2"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 7 and shrink: 3 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink3"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 7 and shrink: 4 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink4"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 7 and shrink: 5 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink5"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 7 and shrink: 6 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink6"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 7 and shrink: 7 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink7"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 7 and shrink: 8 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink8"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 7 and shrink: 9 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink9"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 7 and shrink: 10 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink10"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 8 and shrink: 1 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink1"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 8 and shrink: 2 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink2"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 8 and shrink: 3 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink3"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 8 and shrink: 4 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink4"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 8 and shrink: 5 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink5"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 8 and shrink: 6 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink6"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 8 and shrink: 7 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink7"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 8 and shrink: 8 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink8"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 8 and shrink: 9 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink9"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 8 and shrink: 10 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink10"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 9 and shrink: 1 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink1"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 9 and shrink: 2 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink2"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 9 and shrink: 3 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink3"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 9 and shrink: 4 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink4"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 9 and shrink: 5 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink5"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 9 and shrink: 6 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink6"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 9 and shrink: 7 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink7"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 9 and shrink: 8 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink8"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 9 and shrink: 9 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink9"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 9 and shrink: 10 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink10"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 10 and shrink: 1 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink1"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 10 and shrink: 2 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink2"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 10 and shrink: 3 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink3"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 10 and shrink: 4 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink4"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 10 and shrink: 5 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink5"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 10 and shrink: 6 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink6"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 10 and shrink: 7 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink7"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 10 and shrink: 8 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink8"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 10 and shrink: 9 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink9"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 10 and shrink: 10 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink10"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: false and shrink: 1 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: false and shrink: 2 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink2"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: false and shrink: 3 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink3"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: false and shrink: 4 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink4"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: false and shrink: 5 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink5"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: false and shrink: 6 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink6"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: false and shrink: 7 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink7"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: false and shrink: 8 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink8"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: false and shrink: 9 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink9"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: false and shrink: 10 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink10"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: true and shrink: 1 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink1"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: true and shrink: 2 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink2"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: true and shrink: 3 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink3"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: true and shrink: 4 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink4"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: true and shrink: 5 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink5"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: true and shrink: 6 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink6"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: true and shrink: 7 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink7"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: true and shrink: 8 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink8"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: true and shrink: 9 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink9"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: true and shrink: 10 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink10"
+/>
+`;
+
 exports[`OuiFlexItem grow false is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexGrowZero"
+  class="ouiFlexItem ouiFlexItem--flexGrowZero"
+/>
+`;
+
+exports[`OuiFlexItem grow true is rendered 1`] = `
+<div
+  class="ouiFlexItem"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 1, shrink: 1, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 1, shrink: 1, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 1, shrink: 1, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 1, shrink: 1, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 1, shrink: 2, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 1, shrink: 2, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 1, shrink: 2, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 1, shrink: 2, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 1, shrink: 3, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 1, shrink: 3, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 1, shrink: 3, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 1, shrink: 3, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 1, shrink: 4, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 1, shrink: 4, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 1, shrink: 4, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 1, shrink: 4, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 1, shrink: 5, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 1, shrink: 5, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 1, shrink: 5, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 1, shrink: 5, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 1, shrink: 6, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 1, shrink: 6, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 1, shrink: 6, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 1, shrink: 6, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 1, shrink: 7, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 1, shrink: 7, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 1, shrink: 7, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 1, shrink: 7, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 1, shrink: 8, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 1, shrink: 8, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 1, shrink: 8, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 1, shrink: 8, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 1, shrink: 9, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 1, shrink: 9, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 1, shrink: 9, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 1, shrink: 9, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 1, shrink: 10, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 1, shrink: 10, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 1, shrink: 10, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 1, shrink: 10, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 2, shrink: 1, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 2, shrink: 1, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 2, shrink: 1, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 2, shrink: 1, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 2, shrink: 2, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 2, shrink: 2, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 2, shrink: 2, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 2, shrink: 2, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 2, shrink: 3, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 2, shrink: 3, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 2, shrink: 3, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 2, shrink: 3, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 2, shrink: 4, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 2, shrink: 4, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 2, shrink: 4, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 2, shrink: 4, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 2, shrink: 5, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 2, shrink: 5, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 2, shrink: 5, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 2, shrink: 5, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 2, shrink: 6, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 2, shrink: 6, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 2, shrink: 6, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 2, shrink: 6, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 2, shrink: 7, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 2, shrink: 7, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 2, shrink: 7, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 2, shrink: 7, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 2, shrink: 8, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 2, shrink: 8, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 2, shrink: 8, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 2, shrink: 8, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 2, shrink: 9, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 2, shrink: 9, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 2, shrink: 9, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 2, shrink: 9, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 2, shrink: 10, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 2, shrink: 10, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 2, shrink: 10, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 2, shrink: 10, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 3, shrink: 1, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 3, shrink: 1, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 3, shrink: 1, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 3, shrink: 1, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 3, shrink: 2, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 3, shrink: 2, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 3, shrink: 2, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 3, shrink: 2, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 3, shrink: 3, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 3, shrink: 3, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 3, shrink: 3, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 3, shrink: 3, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 3, shrink: 4, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 3, shrink: 4, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 3, shrink: 4, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 3, shrink: 4, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 3, shrink: 5, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 3, shrink: 5, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 3, shrink: 5, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 3, shrink: 5, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 3, shrink: 6, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 3, shrink: 6, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 3, shrink: 6, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 3, shrink: 6, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 3, shrink: 7, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 3, shrink: 7, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 3, shrink: 7, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 3, shrink: 7, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 3, shrink: 8, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 3, shrink: 8, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 3, shrink: 8, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 3, shrink: 8, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 3, shrink: 9, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 3, shrink: 9, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 3, shrink: 9, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 3, shrink: 9, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 3, shrink: 10, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 3, shrink: 10, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 3, shrink: 10, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 3, shrink: 10, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 4, shrink: 1, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 4, shrink: 1, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 4, shrink: 1, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 4, shrink: 1, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 4, shrink: 2, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 4, shrink: 2, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 4, shrink: 2, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 4, shrink: 2, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 4, shrink: 3, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 4, shrink: 3, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 4, shrink: 3, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 4, shrink: 3, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 4, shrink: 4, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 4, shrink: 4, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 4, shrink: 4, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 4, shrink: 4, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 4, shrink: 5, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 4, shrink: 5, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 4, shrink: 5, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 4, shrink: 5, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 4, shrink: 6, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 4, shrink: 6, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 4, shrink: 6, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 4, shrink: 6, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 4, shrink: 7, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 4, shrink: 7, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 4, shrink: 7, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 4, shrink: 7, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 4, shrink: 8, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 4, shrink: 8, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 4, shrink: 8, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 4, shrink: 8, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 4, shrink: 9, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 4, shrink: 9, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 4, shrink: 9, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 4, shrink: 9, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 4, shrink: 10, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 4, shrink: 10, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 4, shrink: 10, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 4, shrink: 10, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 5, shrink: 1, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 5, shrink: 1, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 5, shrink: 1, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 5, shrink: 1, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 5, shrink: 2, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 5, shrink: 2, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 5, shrink: 2, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 5, shrink: 2, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 5, shrink: 3, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 5, shrink: 3, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 5, shrink: 3, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 5, shrink: 3, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 5, shrink: 4, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 5, shrink: 4, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 5, shrink: 4, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 5, shrink: 4, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 5, shrink: 5, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 5, shrink: 5, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 5, shrink: 5, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 5, shrink: 5, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 5, shrink: 6, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 5, shrink: 6, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 5, shrink: 6, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 5, shrink: 6, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 5, shrink: 7, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 5, shrink: 7, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 5, shrink: 7, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 5, shrink: 7, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 5, shrink: 8, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 5, shrink: 8, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 5, shrink: 8, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 5, shrink: 8, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 5, shrink: 9, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 5, shrink: 9, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 5, shrink: 9, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 5, shrink: 9, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 5, shrink: 10, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 5, shrink: 10, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 5, shrink: 10, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 5, shrink: 10, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 6, shrink: 1, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 6, shrink: 1, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 6, shrink: 1, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 6, shrink: 1, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 6, shrink: 2, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 6, shrink: 2, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 6, shrink: 2, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 6, shrink: 2, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 6, shrink: 3, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 6, shrink: 3, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 6, shrink: 3, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 6, shrink: 3, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 6, shrink: 4, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 6, shrink: 4, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 6, shrink: 4, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 6, shrink: 4, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 6, shrink: 5, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 6, shrink: 5, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 6, shrink: 5, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 6, shrink: 5, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 6, shrink: 6, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 6, shrink: 6, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 6, shrink: 6, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 6, shrink: 6, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 6, shrink: 7, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 6, shrink: 7, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 6, shrink: 7, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 6, shrink: 7, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 6, shrink: 8, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 6, shrink: 8, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 6, shrink: 8, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 6, shrink: 8, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 6, shrink: 9, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 6, shrink: 9, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 6, shrink: 9, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 6, shrink: 9, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 6, shrink: 10, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 6, shrink: 10, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 6, shrink: 10, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 6, shrink: 10, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 7, shrink: 1, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 7, shrink: 1, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 7, shrink: 1, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 7, shrink: 1, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 7, shrink: 2, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 7, shrink: 2, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 7, shrink: 2, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 7, shrink: 2, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 7, shrink: 3, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 7, shrink: 3, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 7, shrink: 3, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 7, shrink: 3, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 7, shrink: 4, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 7, shrink: 4, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 7, shrink: 4, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 7, shrink: 4, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 7, shrink: 5, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 7, shrink: 5, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 7, shrink: 5, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 7, shrink: 5, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 7, shrink: 6, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 7, shrink: 6, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 7, shrink: 6, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 7, shrink: 6, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 7, shrink: 7, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 7, shrink: 7, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 7, shrink: 7, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 7, shrink: 7, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 7, shrink: 8, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 7, shrink: 8, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 7, shrink: 8, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 7, shrink: 8, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 7, shrink: 9, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 7, shrink: 9, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 7, shrink: 9, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 7, shrink: 9, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 7, shrink: 10, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 7, shrink: 10, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 7, shrink: 10, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 7, shrink: 10, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 8, shrink: 1, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 8, shrink: 1, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 8, shrink: 1, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 8, shrink: 1, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 8, shrink: 2, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 8, shrink: 2, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 8, shrink: 2, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 8, shrink: 2, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 8, shrink: 3, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 8, shrink: 3, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 8, shrink: 3, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 8, shrink: 3, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 8, shrink: 4, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 8, shrink: 4, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 8, shrink: 4, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 8, shrink: 4, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 8, shrink: 5, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 8, shrink: 5, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 8, shrink: 5, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 8, shrink: 5, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 8, shrink: 6, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 8, shrink: 6, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 8, shrink: 6, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 8, shrink: 6, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 8, shrink: 7, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 8, shrink: 7, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 8, shrink: 7, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 8, shrink: 7, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 8, shrink: 8, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 8, shrink: 8, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 8, shrink: 8, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 8, shrink: 8, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 8, shrink: 9, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 8, shrink: 9, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 8, shrink: 9, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 8, shrink: 9, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 8, shrink: 10, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 8, shrink: 10, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 8, shrink: 10, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 8, shrink: 10, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 9, shrink: 1, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 9, shrink: 1, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 9, shrink: 1, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 9, shrink: 1, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 9, shrink: 2, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 9, shrink: 2, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 9, shrink: 2, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 9, shrink: 2, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 9, shrink: 3, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 9, shrink: 3, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 9, shrink: 3, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 9, shrink: 3, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 9, shrink: 4, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 9, shrink: 4, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 9, shrink: 4, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 9, shrink: 4, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 9, shrink: 5, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 9, shrink: 5, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 9, shrink: 5, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 9, shrink: 5, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 9, shrink: 6, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 9, shrink: 6, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 9, shrink: 6, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 9, shrink: 6, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 9, shrink: 7, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 9, shrink: 7, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 9, shrink: 7, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 9, shrink: 7, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 9, shrink: 8, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 9, shrink: 8, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 9, shrink: 8, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 9, shrink: 8, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 9, shrink: 9, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 9, shrink: 9, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 9, shrink: 9, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 9, shrink: 9, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 9, shrink: 10, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 9, shrink: 10, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 9, shrink: 10, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 9, shrink: 10, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 10, shrink: 1, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 10, shrink: 1, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 10, shrink: 1, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 10, shrink: 1, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 10, shrink: 2, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 10, shrink: 2, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 10, shrink: 2, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 10, shrink: 2, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 10, shrink: 3, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 10, shrink: 3, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 10, shrink: 3, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 10, shrink: 3, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 10, shrink: 4, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 10, shrink: 4, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 10, shrink: 4, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 10, shrink: 4, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 10, shrink: 5, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 10, shrink: 5, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 10, shrink: 5, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 10, shrink: 5, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 10, shrink: 6, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 10, shrink: 6, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 10, shrink: 6, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 10, shrink: 6, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 10, shrink: 7, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 10, shrink: 7, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 10, shrink: 7, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 10, shrink: 7, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 10, shrink: 8, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 10, shrink: 8, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 10, shrink: 8, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 10, shrink: 8, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 10, shrink: 9, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 10, shrink: 9, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 10, shrink: 9, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 10, shrink: 9, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 10, shrink: 10, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 10, shrink: 10, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 10, shrink: 10, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 10, shrink: 10, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: false, shrink: 1, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: false, shrink: 1, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: false, shrink: 1, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: false, shrink: 1, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: false, shrink: 2, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: false, shrink: 2, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: false, shrink: 2, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: false, shrink: 2, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: false, shrink: 3, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: false, shrink: 3, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: false, shrink: 3, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: false, shrink: 3, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: false, shrink: 4, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: false, shrink: 4, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: false, shrink: 4, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: false, shrink: 4, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: false, shrink: 5, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: false, shrink: 5, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: false, shrink: 5, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: false, shrink: 5, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: false, shrink: 6, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: false, shrink: 6, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: false, shrink: 6, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: false, shrink: 6, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: false, shrink: 7, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: false, shrink: 7, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: false, shrink: 7, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: false, shrink: 7, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: false, shrink: 8, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: false, shrink: 8, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: false, shrink: 8, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: false, shrink: 8, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: false, shrink: 9, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: false, shrink: 9, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: false, shrink: 9, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: false, shrink: 9, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: false, shrink: 10, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: false, shrink: 10, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: false, shrink: 10, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: false, shrink: 10, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: true, shrink: 1, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: true, shrink: 1, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: true, shrink: 1, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: true, shrink: 1, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: true, shrink: 2, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: true, shrink: 2, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: true, shrink: 2, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: true, shrink: 2, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: true, shrink: 3, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: true, shrink: 3, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: true, shrink: 3, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: true, shrink: 3, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: true, shrink: 4, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: true, shrink: 4, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: true, shrink: 4, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: true, shrink: 4, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-min-content"
 />
 `;
 
-exports[`OuiFlexItem grow true is rendered 1`] = `
+exports[`OuiFlexItem grow, shrink, and basis combination grow: true, shrink: 5, and basis: auto is rendered 1`] = `
 <div
-  class="ouiFlexItem"
+  class="ouiFlexItem ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: true, shrink: 5, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: true, shrink: 5, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: true, shrink: 5, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: true, shrink: 6, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: true, shrink: 6, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: true, shrink: 6, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: true, shrink: 6, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: true, shrink: 7, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: true, shrink: 7, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: true, shrink: 7, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: true, shrink: 7, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: true, shrink: 8, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: true, shrink: 8, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: true, shrink: 8, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: true, shrink: 8, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: true, shrink: 9, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: true, shrink: 9, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: true, shrink: 9, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: true, shrink: 9, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: true, shrink: 10, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: true, shrink: 10, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: true, shrink: 10, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: true, shrink: 10, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-min-content"
 />
 `;
 
@@ -163,3 +4051,243 @@ exports[`OuiFlexItem shrink 10 is rendered 1`] = `
   class="ouiFlexItem ouiFlexItem--flexShrink10"
 />
 `;
+
+exports[`OuiFlexItem shrink and basis combination shrink: 1 and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem shrink and basis combination shrink: 1 and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem shrink and basis combination shrink: 1 and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem shrink and basis combination shrink: 1 and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem shrink and basis combination shrink: 2 and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem shrink and basis combination shrink: 2 and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem shrink and basis combination shrink: 2 and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem shrink and basis combination shrink: 2 and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem shrink and basis combination shrink: 3 and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem shrink and basis combination shrink: 3 and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem shrink and basis combination shrink: 3 and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem shrink and basis combination shrink: 3 and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem shrink and basis combination shrink: 4 and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem shrink and basis combination shrink: 4 and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem shrink and basis combination shrink: 4 and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem shrink and basis combination shrink: 4 and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem shrink and basis combination shrink: 5 and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem shrink and basis combination shrink: 5 and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem shrink and basis combination shrink: 5 and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem shrink and basis combination shrink: 5 and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem shrink and basis combination shrink: 6 and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem shrink and basis combination shrink: 6 and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem shrink and basis combination shrink: 6 and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem shrink and basis combination shrink: 6 and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem shrink and basis combination shrink: 7 and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem shrink and basis combination shrink: 7 and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem shrink and basis combination shrink: 7 and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem shrink and basis combination shrink: 7 and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem shrink and basis combination shrink: 8 and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem shrink and basis combination shrink: 8 and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem shrink and basis combination shrink: 8 and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem shrink and basis combination shrink: 8 and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem shrink and basis combination shrink: 9 and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem shrink and basis combination shrink: 9 and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem shrink and basis combination shrink: 9 and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem shrink and basis combination shrink: 9 and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem shrink and basis combination shrink: 10 and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem shrink and basis combination shrink: 10 and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem shrink and basis combination shrink: 10 and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem shrink and basis combination shrink: 10 and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-min-content"
+/>
+`;
diff --git a/src/components/flex/flex_item.test.tsx b/src/components/flex/flex_item.test.tsx
index 279edf938e..15efd3df09 100644
--- a/src/components/flex/flex_item.test.tsx
+++ b/src/components/flex/flex_item.test.tsx
@@ -53,6 +53,7 @@ describe('OuiFlexItem', () => {
     expect(component).toMatchSnapshot();
   });
 
+  // Grow Values Only
   describe('grow', () => {
     GROW_SIZES.concat([true, false]).forEach((value) => {
       test(`${value} is rendered`, () => {
@@ -63,6 +64,7 @@ describe('OuiFlexItem', () => {
     });
   });
 
+  // Shrink Values Only
   describe('shrink', () => {
     SHRINK_SIZES.forEach((value) => {
       test(`${value} is rendered`, () => {
@@ -73,6 +75,7 @@ describe('OuiFlexItem', () => {
     });
   });
 
+  // Basis Values Only
   describe('basis', () => {
     BASIS_VALUES.forEach((value) => {
       test(`${value} is rendered`, () => {
@@ -82,4 +85,70 @@ describe('OuiFlexItem', () => {
       });
     });
   });
+
+  // Grow and Basis Combination
+  describe('grow and basis combination', () => {
+    GROW_SIZES.concat([true, false]).forEach((growValue) => {
+      BASIS_VALUES.forEach((basisValue) => {
+        test(`grow: ${growValue} and basis: ${basisValue} is rendered`, () => {
+          const component = render(
+            <OuiFlexItem grow={growValue} basis={basisValue} />
+          );
+
+          expect(component).toMatchSnapshot();
+        });
+      });
+    });
+  });
+
+  // Grow and Shrink Combination
+  describe('grow and shrink combination', () => {
+    GROW_SIZES.concat([true, false]).forEach((growValue) => {
+      SHRINK_SIZES.forEach((shrinkValue) => {
+        test(`grow: ${growValue} and shrink: ${shrinkValue} is rendered`, () => {
+          const component = render(
+            <OuiFlexItem grow={growValue} shrink={shrinkValue} />
+          );
+
+          expect(component).toMatchSnapshot();
+        });
+      });
+    });
+  });
+
+  // Shrink and Basis Combination
+  describe('shrink and basis combination', () => {
+    SHRINK_SIZES.forEach((shrinkValue) => {
+      BASIS_VALUES.forEach((basisValue) => {
+        test(`shrink: ${shrinkValue} and basis: ${basisValue} is rendered`, () => {
+          const component = render(
+            <OuiFlexItem shrink={shrinkValue} basis={basisValue} />
+          );
+
+          expect(component).toMatchSnapshot();
+        });
+      });
+    });
+  });
+
+  // Grow, Shrink, and Basis Combination
+  describe('grow, shrink, and basis combination', () => {
+    GROW_SIZES.concat([true, false]).forEach((growValue) => {
+      SHRINK_SIZES.forEach((shrinkValue) => {
+        BASIS_VALUES.forEach((basisValue) => {
+          test(`grow: ${growValue}, shrink: ${shrinkValue}, and basis: ${basisValue} is rendered`, () => {
+            const component = render(
+              <OuiFlexItem
+                grow={growValue}
+                shrink={shrinkValue}
+                basis={basisValue}
+              />
+            );
+
+            expect(component).toMatchSnapshot();
+          });
+        });
+      });
+    });
+  });
 });

From c58f11abc6c574de69192415f367355c8f9dbfc8 Mon Sep 17 00:00:00 2001
From: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
Date: Fri, 17 Nov 2023 15:50:45 +0000
Subject: [PATCH 17/24] removing property flex-basis:auto from CSS class
 ouiFlexItem--flexShrinkZero

Signed-off-by: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
---
 src/components/flex/_flex_item.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/flex/_flex_item.scss b/src/components/flex/_flex_item.scss
index 9fb5898da4..1b42d21155 100644
--- a/src/components/flex/_flex_item.scss
+++ b/src/components/flex/_flex_item.scss
@@ -39,7 +39,6 @@
 
   &.ouiFlexItem--flexShrinkZero { /* 1 */
     flex-shrink: 0; /* 2 */
-    flex-basis: auto; /* 2 */
   }
 
   &.ouiFlexItem--flexBasisAuto { /* 1 */

From 66c8e9ef5e444de85a54c6756366ec2a098c27cc Mon Sep 17 00:00:00 2001
From: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
Date: Tue, 21 Nov 2023 16:13:46 +0000
Subject: [PATCH 18/24] modifiying logic for prop 'basis' according what was
 requested by maintainers

Signed-off-by: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
---
 src/components/flex/flex_item.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/flex/flex_item.tsx b/src/components/flex/flex_item.tsx
index 3fc61b4761..8918754b9d 100644
--- a/src/components/flex/flex_item.tsx
+++ b/src/components/flex/flex_item.tsx
@@ -96,9 +96,9 @@ export const OuiFlexItem: FunctionComponent<
 > = ({
   children,
   className,
-  grow = true, // true -> use default behaviour 'flex-grow: 1'
-  shrink = true, //  true -> use default behaviour 'flex-shrink: 1'
-  basis = true, //  true -> use default behaviour 'flex-basis: 0%'
+  grow = true, // use default behaviour 'flex-grow: 1'
+  shrink = true, //  use default behaviour 'flex-shrink: 1'
+  basis = undefined, //  Preserve basis prop coming from parent or grow prop unless specified
   component: Component = 'div',
   ...rest
 }) => {
@@ -114,7 +114,7 @@ export const OuiFlexItem: FunctionComponent<
       // use flex-shrink: 0 and flex-basis: auto
       'ouiFlexItem--flexShrinkZero': !shrink,
       // use flex-basis: auto
-      'ouiFlexItem--flexBasisAuto': !basis,
+      'ouiFlexItem--flexBasisAuto': basis === false,
       // use flex-grow: {grow} and flex-basis: auto
       [`ouiFlexItem--flexGrow${grow}`]:
         typeof grow === 'number' ? GROW_SIZES.indexOf(grow) >= 0 : undefined,

From e4e0aff4037e204d4e14585ea9f02bffdfb6c025 Mon Sep 17 00:00:00 2001
From: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
Date: Fri, 12 Jan 2024 12:06:05 -0300
Subject: [PATCH 19/24] Update src-docs/src/views/flex/flex_basis_string.tsx

Update to new format copyright and license comments at beginning of file

Co-authored-by: Miki <amoo_miki@yahoo.com>
Signed-off-by: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
---
 src-docs/src/views/flex/flex_basis_string.tsx | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src-docs/src/views/flex/flex_basis_string.tsx b/src-docs/src/views/flex/flex_basis_string.tsx
index b17ab6bd67..4c45bc3fe2 100644
--- a/src-docs/src/views/flex/flex_basis_string.tsx
+++ b/src-docs/src/views/flex/flex_basis_string.tsx
@@ -1,12 +1,6 @@
 /*
+ * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
- *
- * The OpenSearch Contributors require contributions made to
- * this file be licensed under the Apache-2.0 license or a
- * compatible open source license.
- *
- * Modifications Copyright OpenSearch Contributors. See
- * GitHub history for details.
  */
 
 import React from 'react';

From 2341eabb12be60e5bb07a60502ad3f45fcf02250 Mon Sep 17 00:00:00 2001
From: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
Date: Fri, 12 Jan 2024 12:06:57 -0300
Subject: [PATCH 20/24] Update src-docs/src/views/flex/flex_shrink_numeric.tsx

Update to new format copyright and license comments at beginning of file

Co-authored-by: Miki <amoo_miki@yahoo.com>
Signed-off-by: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
---
 src-docs/src/views/flex/flex_shrink_numeric.tsx | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src-docs/src/views/flex/flex_shrink_numeric.tsx b/src-docs/src/views/flex/flex_shrink_numeric.tsx
index 570d0a0f0e..3825ec9998 100644
--- a/src-docs/src/views/flex/flex_shrink_numeric.tsx
+++ b/src-docs/src/views/flex/flex_shrink_numeric.tsx
@@ -1,12 +1,6 @@
 /*
+ * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
- *
- * The OpenSearch Contributors require contributions made to
- * this file be licensed under the Apache-2.0 license or a
- * compatible open source license.
- *
- * Modifications Copyright OpenSearch Contributors. See
- * GitHub history for details.
  */
 
 import React from 'react';

From ceed1ceb8b1a1c85af3e9ec4a91cb13dc71d2a4b Mon Sep 17 00:00:00 2001
From: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
Date: Fri, 12 Jan 2024 12:25:29 -0300
Subject: [PATCH 21/24] updating text for examples of Basis in flex items

Signed-off-by: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
---
 src-docs/src/views/flex/flex_basis_string.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src-docs/src/views/flex/flex_basis_string.tsx b/src-docs/src/views/flex/flex_basis_string.tsx
index 4c45bc3fe2..726564770e 100644
--- a/src-docs/src/views/flex/flex_basis_string.tsx
+++ b/src-docs/src/views/flex/flex_basis_string.tsx
@@ -11,23 +11,27 @@ export default () => (
   <div>
     <OuiFlexGroup>
       <OuiFlexItem basis={'auto'}>
-        Auto
+        auto
+        <br />
         <br />
         Varies based on content size or width/height property
       </OuiFlexItem>
       <OuiFlexItem basis={'fit-content'}>
-        Fit-content
+        fit-content
+        <br />
         <br />
         Sizes the item based on the content&apos;s width but within the
         container.
       </OuiFlexItem>
       <OuiFlexItem basis={'max-content'}>
-        Max-content
+        max-content
+        <br />
         <br />
         Sizes the item to be as large as the content&apos;s maximum width.
       </OuiFlexItem>
       <OuiFlexItem basis={'min-content'}>
-        Min-content
+        min-content
+        <br />
         <br />
         Sizes the item to be as small as the content&apos;s minimum width
         without breaking.

From 01e94eae824e5393c909792c028cc73e15e8818a Mon Sep 17 00:00:00 2001
From: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
Date: Fri, 12 Jan 2024 12:39:06 -0300
Subject: [PATCH 22/24] adding 0 item for GROW_SIZES and SHRINK_SIZES arrays
 and FlexItemGrowSize and FlexItemShrinkSize types

Signed-off-by: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
---
 src/components/flex/flex_item.tsx | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/flex/flex_item.tsx b/src/components/flex/flex_item.tsx
index 8918754b9d..80ea6aee37 100644
--- a/src/components/flex/flex_item.tsx
+++ b/src/components/flex/flex_item.tsx
@@ -33,6 +33,7 @@ import classNames from 'classnames';
 import { CommonProps } from '../common';
 
 export type FlexItemGrowSize =
+  | 0
   | 1
   | 2
   | 3
@@ -47,6 +48,7 @@ export type FlexItemGrowSize =
   | false
   | null;
 export type FlexItemShrinkSize =
+  | 0
   | 1
   | 2
   | 3
@@ -69,8 +71,21 @@ export interface OuiFlexItemProps {
   component?: keyof JSX.IntrinsicElements;
 }
 
-export const GROW_SIZES: FlexItemGrowSize[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+export const GROW_SIZES: FlexItemGrowSize[] = [
+  0,
+  1,
+  2,
+  3,
+  4,
+  5,
+  6,
+  7,
+  8,
+  9,
+  10,
+];
 export const SHRINK_SIZES: FlexItemShrinkSize[] = [
+  0,
   1,
   2,
   3,

From 03ce6776bef717a456d2a0304d69805d38fec7a5 Mon Sep 17 00:00:00 2001
From: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
Date: Fri, 12 Jan 2024 12:46:04 -0300
Subject: [PATCH 23/24] make 'true' and 'false' options for types
 FlexItemGrowSize and FlexItemShrinkSize deprecated and add a TODO comment to
 remove them for next major release

Signed-off-by: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
---
 src/components/flex/flex_item.tsx | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/components/flex/flex_item.tsx b/src/components/flex/flex_item.tsx
index 80ea6aee37..1ce3eb26b3 100644
--- a/src/components/flex/flex_item.tsx
+++ b/src/components/flex/flex_item.tsx
@@ -32,6 +32,7 @@ import React, { HTMLAttributes, FunctionComponent } from 'react';
 import classNames from 'classnames';
 import { CommonProps } from '../common';
 
+// TODO: Remove 'true' and 'false' from the type definitions on next major release
 export type FlexItemGrowSize =
   | 0
   | 1
@@ -44,9 +45,19 @@ export type FlexItemGrowSize =
   | 8
   | 9
   | 10
+  /**
+   * @deprecated `true` will be removed in the next major release.
+   * Use numeric values instead.
+   */
   | true
+  /**
+   * @deprecated `false` will be removed in the next major release.
+   * Use numeric values instead.
+   */
   | false
   | null;
+
+// TODO: Remove 'true' and 'false' from the type definitions on next major release
 export type FlexItemShrinkSize =
   | 0
   | 1
@@ -59,7 +70,15 @@ export type FlexItemShrinkSize =
   | 8
   | 9
   | 10
+  /**
+   * @deprecated `true` will be removed in the next major release.
+   * Use numeric values instead.
+   */
   | true
+  /**
+   * @deprecated `false` will be removed in the next major release.
+   * Use numeric values instead.
+   */
   | false
   | null;
 export type FlexItemBasisValue = string | true | false | null;

From 9fd51c94572b382322767c2faff3c056d894e188 Mon Sep 17 00:00:00 2001
From: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
Date: Fri, 12 Jan 2024 13:52:33 -0300
Subject: [PATCH 24/24] updating snapshoots

Signed-off-by: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
---
 .../__snapshots__/flex_item.test.tsx.snap     | 750 ++++++++++++++++++
 1 file changed, 750 insertions(+)

diff --git a/src/components/flex/__snapshots__/flex_item.test.tsx.snap b/src/components/flex/__snapshots__/flex_item.test.tsx.snap
index 28752fdb85..fc5500fc68 100644
--- a/src/components/flex/__snapshots__/flex_item.test.tsx.snap
+++ b/src/components/flex/__snapshots__/flex_item.test.tsx.snap
@@ -24,6 +24,12 @@ exports[`OuiFlexItem basis min-content is rendered 1`] = `
 />
 `;
 
+exports[`OuiFlexItem grow 0 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0"
+/>
+`;
+
 exports[`OuiFlexItem grow 1 is rendered 1`] = `
 <div
   class="ouiFlexItem ouiFlexItem--flexGrow1"
@@ -84,6 +90,30 @@ exports[`OuiFlexItem grow 10 is rendered 1`] = `
 />
 `;
 
+exports[`OuiFlexItem grow and basis combination grow: 0 and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: 0 and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: 0 and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow and basis combination grow: 0 and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
 exports[`OuiFlexItem grow and basis combination grow: 1 and basis: auto is rendered 1`] = `
 <div
   class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexBasis-auto"
@@ -372,6 +402,78 @@ exports[`OuiFlexItem grow and basis combination grow: true and basis: min-conten
 />
 `;
 
+exports[`OuiFlexItem grow and shrink combination grow: 0 and shrink: 0 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink0"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 0 and shrink: 1 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink1"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 0 and shrink: 2 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink2"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 0 and shrink: 3 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink3"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 0 and shrink: 4 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink4"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 0 and shrink: 5 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink5"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 0 and shrink: 6 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink6"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 0 and shrink: 7 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink7"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 0 and shrink: 8 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink8"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 0 and shrink: 9 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink9"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 0 and shrink: 10 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink10"
+/>
+`;
+
+exports[`OuiFlexItem grow and shrink combination grow: 1 and shrink: 0 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink0"
+/>
+`;
+
 exports[`OuiFlexItem grow and shrink combination grow: 1 and shrink: 1 is rendered 1`] = `
 <div
   class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink1"
@@ -432,6 +534,12 @@ exports[`OuiFlexItem grow and shrink combination grow: 1 and shrink: 10 is rende
 />
 `;
 
+exports[`OuiFlexItem grow and shrink combination grow: 2 and shrink: 0 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink0"
+/>
+`;
+
 exports[`OuiFlexItem grow and shrink combination grow: 2 and shrink: 1 is rendered 1`] = `
 <div
   class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink1"
@@ -492,6 +600,12 @@ exports[`OuiFlexItem grow and shrink combination grow: 2 and shrink: 10 is rende
 />
 `;
 
+exports[`OuiFlexItem grow and shrink combination grow: 3 and shrink: 0 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink0"
+/>
+`;
+
 exports[`OuiFlexItem grow and shrink combination grow: 3 and shrink: 1 is rendered 1`] = `
 <div
   class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink1"
@@ -552,6 +666,12 @@ exports[`OuiFlexItem grow and shrink combination grow: 3 and shrink: 10 is rende
 />
 `;
 
+exports[`OuiFlexItem grow and shrink combination grow: 4 and shrink: 0 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink0"
+/>
+`;
+
 exports[`OuiFlexItem grow and shrink combination grow: 4 and shrink: 1 is rendered 1`] = `
 <div
   class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink1"
@@ -612,6 +732,12 @@ exports[`OuiFlexItem grow and shrink combination grow: 4 and shrink: 10 is rende
 />
 `;
 
+exports[`OuiFlexItem grow and shrink combination grow: 5 and shrink: 0 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink0"
+/>
+`;
+
 exports[`OuiFlexItem grow and shrink combination grow: 5 and shrink: 1 is rendered 1`] = `
 <div
   class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink1"
@@ -672,6 +798,12 @@ exports[`OuiFlexItem grow and shrink combination grow: 5 and shrink: 10 is rende
 />
 `;
 
+exports[`OuiFlexItem grow and shrink combination grow: 6 and shrink: 0 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink0"
+/>
+`;
+
 exports[`OuiFlexItem grow and shrink combination grow: 6 and shrink: 1 is rendered 1`] = `
 <div
   class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink1"
@@ -732,6 +864,12 @@ exports[`OuiFlexItem grow and shrink combination grow: 6 and shrink: 10 is rende
 />
 `;
 
+exports[`OuiFlexItem grow and shrink combination grow: 7 and shrink: 0 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink0"
+/>
+`;
+
 exports[`OuiFlexItem grow and shrink combination grow: 7 and shrink: 1 is rendered 1`] = `
 <div
   class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink1"
@@ -792,6 +930,12 @@ exports[`OuiFlexItem grow and shrink combination grow: 7 and shrink: 10 is rende
 />
 `;
 
+exports[`OuiFlexItem grow and shrink combination grow: 8 and shrink: 0 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink0"
+/>
+`;
+
 exports[`OuiFlexItem grow and shrink combination grow: 8 and shrink: 1 is rendered 1`] = `
 <div
   class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink1"
@@ -852,6 +996,12 @@ exports[`OuiFlexItem grow and shrink combination grow: 8 and shrink: 10 is rende
 />
 `;
 
+exports[`OuiFlexItem grow and shrink combination grow: 9 and shrink: 0 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink0"
+/>
+`;
+
 exports[`OuiFlexItem grow and shrink combination grow: 9 and shrink: 1 is rendered 1`] = `
 <div
   class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink1"
@@ -912,6 +1062,12 @@ exports[`OuiFlexItem grow and shrink combination grow: 9 and shrink: 10 is rende
 />
 `;
 
+exports[`OuiFlexItem grow and shrink combination grow: 10 and shrink: 0 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink0"
+/>
+`;
+
 exports[`OuiFlexItem grow and shrink combination grow: 10 and shrink: 1 is rendered 1`] = `
 <div
   class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink1"
@@ -972,6 +1128,12 @@ exports[`OuiFlexItem grow and shrink combination grow: 10 and shrink: 10 is rend
 />
 `;
 
+exports[`OuiFlexItem grow and shrink combination grow: false and shrink: 0 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrinkZero ouiFlexItem--flexShrink0"
+/>
+`;
+
 exports[`OuiFlexItem grow and shrink combination grow: false and shrink: 1 is rendered 1`] = `
 <div
   class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
@@ -1032,6 +1194,12 @@ exports[`OuiFlexItem grow and shrink combination grow: false and shrink: 10 is r
 />
 `;
 
+exports[`OuiFlexItem grow and shrink combination grow: true and shrink: 0 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexShrink0"
+/>
+`;
+
 exports[`OuiFlexItem grow and shrink combination grow: true and shrink: 1 is rendered 1`] = `
 <div
   class="ouiFlexItem ouiFlexItem--flexShrink1"
@@ -1104,6 +1272,294 @@ exports[`OuiFlexItem grow true is rendered 1`] = `
 />
 `;
 
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 0, shrink: 0, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 0, shrink: 0, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 0, shrink: 0, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 0, shrink: 0, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 0, shrink: 1, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 0, shrink: 1, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 0, shrink: 1, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 0, shrink: 1, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 0, shrink: 2, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 0, shrink: 2, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 0, shrink: 2, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 0, shrink: 2, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink2 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 0, shrink: 3, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 0, shrink: 3, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 0, shrink: 3, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 0, shrink: 3, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink3 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 0, shrink: 4, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 0, shrink: 4, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 0, shrink: 4, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 0, shrink: 4, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink4 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 0, shrink: 5, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 0, shrink: 5, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 0, shrink: 5, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 0, shrink: 5, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink5 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 0, shrink: 6, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 0, shrink: 6, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 0, shrink: 6, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 0, shrink: 6, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink6 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 0, shrink: 7, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 0, shrink: 7, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 0, shrink: 7, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 0, shrink: 7, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink7 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 0, shrink: 8, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 0, shrink: 8, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 0, shrink: 8, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 0, shrink: 8, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink8 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 0, shrink: 9, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 0, shrink: 9, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 0, shrink: 9, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 0, shrink: 9, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink9 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 0, shrink: 10, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 0, shrink: 10, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 0, shrink: 10, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 0, shrink: 10, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexShrink10 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 1, shrink: 0, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 1, shrink: 0, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 1, shrink: 0, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 1, shrink: 0, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
 exports[`OuiFlexItem grow, shrink, and basis combination grow: 1, shrink: 1, and basis: auto is rendered 1`] = `
 <div
   class="ouiFlexItem ouiFlexItem--flexGrow1 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
@@ -1344,6 +1800,30 @@ exports[`OuiFlexItem grow, shrink, and basis combination grow: 1, shrink: 10, an
 />
 `;
 
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 2, shrink: 0, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 2, shrink: 0, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 2, shrink: 0, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 2, shrink: 0, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
 exports[`OuiFlexItem grow, shrink, and basis combination grow: 2, shrink: 1, and basis: auto is rendered 1`] = `
 <div
   class="ouiFlexItem ouiFlexItem--flexGrow2 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
@@ -1584,6 +2064,30 @@ exports[`OuiFlexItem grow, shrink, and basis combination grow: 2, shrink: 10, an
 />
 `;
 
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 3, shrink: 0, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 3, shrink: 0, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 3, shrink: 0, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 3, shrink: 0, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
 exports[`OuiFlexItem grow, shrink, and basis combination grow: 3, shrink: 1, and basis: auto is rendered 1`] = `
 <div
   class="ouiFlexItem ouiFlexItem--flexGrow3 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
@@ -1824,6 +2328,30 @@ exports[`OuiFlexItem grow, shrink, and basis combination grow: 3, shrink: 10, an
 />
 `;
 
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 4, shrink: 0, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 4, shrink: 0, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 4, shrink: 0, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 4, shrink: 0, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
 exports[`OuiFlexItem grow, shrink, and basis combination grow: 4, shrink: 1, and basis: auto is rendered 1`] = `
 <div
   class="ouiFlexItem ouiFlexItem--flexGrow4 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
@@ -2064,6 +2592,30 @@ exports[`OuiFlexItem grow, shrink, and basis combination grow: 4, shrink: 10, an
 />
 `;
 
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 5, shrink: 0, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 5, shrink: 0, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 5, shrink: 0, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 5, shrink: 0, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
 exports[`OuiFlexItem grow, shrink, and basis combination grow: 5, shrink: 1, and basis: auto is rendered 1`] = `
 <div
   class="ouiFlexItem ouiFlexItem--flexGrow5 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
@@ -2304,6 +2856,30 @@ exports[`OuiFlexItem grow, shrink, and basis combination grow: 5, shrink: 10, an
 />
 `;
 
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 6, shrink: 0, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 6, shrink: 0, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 6, shrink: 0, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 6, shrink: 0, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
 exports[`OuiFlexItem grow, shrink, and basis combination grow: 6, shrink: 1, and basis: auto is rendered 1`] = `
 <div
   class="ouiFlexItem ouiFlexItem--flexGrow6 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
@@ -2544,6 +3120,30 @@ exports[`OuiFlexItem grow, shrink, and basis combination grow: 6, shrink: 10, an
 />
 `;
 
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 7, shrink: 0, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 7, shrink: 0, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 7, shrink: 0, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 7, shrink: 0, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
 exports[`OuiFlexItem grow, shrink, and basis combination grow: 7, shrink: 1, and basis: auto is rendered 1`] = `
 <div
   class="ouiFlexItem ouiFlexItem--flexGrow7 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
@@ -2784,6 +3384,30 @@ exports[`OuiFlexItem grow, shrink, and basis combination grow: 7, shrink: 10, an
 />
 `;
 
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 8, shrink: 0, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 8, shrink: 0, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 8, shrink: 0, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 8, shrink: 0, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
 exports[`OuiFlexItem grow, shrink, and basis combination grow: 8, shrink: 1, and basis: auto is rendered 1`] = `
 <div
   class="ouiFlexItem ouiFlexItem--flexGrow8 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
@@ -3024,6 +3648,30 @@ exports[`OuiFlexItem grow, shrink, and basis combination grow: 8, shrink: 10, an
 />
 `;
 
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 9, shrink: 0, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 9, shrink: 0, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 9, shrink: 0, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 9, shrink: 0, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
 exports[`OuiFlexItem grow, shrink, and basis combination grow: 9, shrink: 1, and basis: auto is rendered 1`] = `
 <div
   class="ouiFlexItem ouiFlexItem--flexGrow9 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
@@ -3264,6 +3912,30 @@ exports[`OuiFlexItem grow, shrink, and basis combination grow: 9, shrink: 10, an
 />
 `;
 
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 10, shrink: 0, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 10, shrink: 0, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 10, shrink: 0, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: 10, shrink: 0, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
 exports[`OuiFlexItem grow, shrink, and basis combination grow: 10, shrink: 1, and basis: auto is rendered 1`] = `
 <div
   class="ouiFlexItem ouiFlexItem--flexGrow10 ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
@@ -3504,6 +4176,30 @@ exports[`OuiFlexItem grow, shrink, and basis combination grow: 10, shrink: 10, a
 />
 `;
 
+exports[`OuiFlexItem grow, shrink, and basis combination grow: false, shrink: 0, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrinkZero ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: false, shrink: 0, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrinkZero ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: false, shrink: 0, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrinkZero ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: false, shrink: 0, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrinkZero ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
 exports[`OuiFlexItem grow, shrink, and basis combination grow: false, shrink: 1, and basis: auto is rendered 1`] = `
 <div
   class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
@@ -3744,6 +4440,30 @@ exports[`OuiFlexItem grow, shrink, and basis combination grow: false, shrink: 10
 />
 `;
 
+exports[`OuiFlexItem grow, shrink, and basis combination grow: true, shrink: 0, and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: true, shrink: 0, and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: true, shrink: 0, and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem grow, shrink, and basis combination grow: true, shrink: 0, and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
 exports[`OuiFlexItem grow, shrink, and basis combination grow: true, shrink: 1, and basis: auto is rendered 1`] = `
 <div
   class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"
@@ -3992,6 +4712,12 @@ exports[`OuiFlexItem is rendered 1`] = `
 />
 `;
 
+exports[`OuiFlexItem shrink 0 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexShrink0"
+/>
+`;
+
 exports[`OuiFlexItem shrink 1 is rendered 1`] = `
 <div
   class="ouiFlexItem ouiFlexItem--flexShrink1"
@@ -4052,6 +4778,30 @@ exports[`OuiFlexItem shrink 10 is rendered 1`] = `
 />
 `;
 
+exports[`OuiFlexItem shrink and basis combination shrink: 0 and basis: auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem shrink and basis combination shrink: 0 and basis: fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem shrink and basis combination shrink: 0 and basis: max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem shrink and basis combination shrink: 0 and basis: min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrinkZero ouiFlexItem--flexShrink0 ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
 exports[`OuiFlexItem shrink and basis combination shrink: 1 and basis: auto is rendered 1`] = `
 <div
   class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFlexItem--flexBasis-auto"