diff --git a/CHANGELOG.md b/CHANGELOG.md
index aab1034ce7..1039c642f8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -21,6 +21,7 @@
 - Rename `crossInACircleFilled` asset files and ensure backward compatibility ([#1113](https://github.com/opensearch-project/oui/pull/1113))
 - Implement validation for icon input source & set default icon to `Beaker` ([#1137](https://github.com/opensearch-project/oui/pull/1137))
 - Add `Docking` icons ([#1041](https://github.com/opensearch-project/oui/pull/1041))
+- Add `shrink` and `basis` props to OuiFlexItem ([#1126](https://github.com/opensearch-project/oui/pull/1126))
 - Add SplitButton control ([#1193](https://github.com/opensearch-project/oui/pull/1193))
 
 ### 🐛 Bug Fixes
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..726564770e
--- /dev/null
+++ b/src-docs/src/views/flex/flex_basis_string.tsx
@@ -0,0 +1,41 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+
+import { OuiFlexGroup, OuiFlexItem } from '../../../../src/components/flex';
+
+export default () => (
+  <div>
+    <OuiFlexGroup>
+      <OuiFlexItem basis={'auto'}>
+        auto
+        <br />
+        <br />
+        Varies based on content size or width/height property
+      </OuiFlexItem>
+      <OuiFlexItem basis={'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
+        <br />
+        <br />
+        Sizes the item to be as large as the content&apos;s maximum width.
+      </OuiFlexItem>
+      <OuiFlexItem basis={'min-content'}>
+        min-content
+        <br />
+        <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..3825ec9998
--- /dev/null
+++ b/src-docs/src/views/flex/flex_shrink_numeric.tsx
@@ -0,0 +1,45 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+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>
+);
diff --git a/src/components/flex/__snapshots__/flex_item.test.tsx.snap b/src/components/flex/__snapshots__/flex_item.test.tsx.snap
index e516a31ce9..fc5500fc68 100644
--- a/src/components/flex/__snapshots__/flex_item.test.tsx.snap
+++ b/src/components/flex/__snapshots__/flex_item.test.tsx.snap
@@ -1,5 +1,35 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`OuiFlexItem basis auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem basis fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem basis max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem basis min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
+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"
@@ -60,22 +90,4954 @@ exports[`OuiFlexItem grow 10 is rendered 1`] = `
 />
 `;
 
-exports[`OuiFlexItem grow false is rendered 1`] = `
+exports[`OuiFlexItem grow and basis combination grow: 0 and basis: auto is rendered 1`] = `
 <div
-  class="ouiFlexItem ouiFlexItem--flexGrowZero"
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexBasis-auto"
 />
 `;
 
-exports[`OuiFlexItem grow true is rendered 1`] = `
+exports[`OuiFlexItem grow and basis combination grow: 0 and basis: fit-content is rendered 1`] = `
 <div
-  class="ouiFlexItem"
+  class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexGrow0 ouiFlexItem--flexBasis-fit-content"
 />
 `;
 
-exports[`OuiFlexItem is rendered 1`] = `
+exports[`OuiFlexItem grow and basis combination grow: 0 and basis: max-content is rendered 1`] = `
 <div
-  aria-label="aria-label"
-  class="ouiFlexItem testClass1 testClass2"
-  data-test-subj="test subject string"
+  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"
+/>
+`;
+
+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: 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"
+/>
+`;
+
+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: 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"
+/>
+`;
+
+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: 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"
+/>
+`;
+
+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: 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"
+/>
+`;
+
+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: 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"
+/>
+`;
+
+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: 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"
+/>
+`;
+
+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: 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"
+/>
+`;
+
+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: 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"
+/>
+`;
+
+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: 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"
+/>
+`;
+
+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: 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"
+/>
+`;
+
+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: 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"
+/>
+`;
+
+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: 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"
+/>
+`;
+
+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"
+/>
+`;
+
+exports[`OuiFlexItem grow true is rendered 1`] = `
+<div
+  class="ouiFlexItem"
+/>
+`;
+
+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"
+/>
+`;
+
+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: 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"
+/>
+`;
+
+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: 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"
+/>
+`;
+
+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: 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"
+/>
+`;
+
+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: 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"
+/>
+`;
+
+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: 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"
+/>
+`;
+
+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: 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"
+/>
+`;
+
+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: 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"
+/>
+`;
+
+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: 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"
+/>
+`;
+
+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: 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"
+/>
+`;
+
+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: 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"
+/>
+`;
+
+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: 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"
+/>
+`;
+
+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, shrink, and basis combination grow: true, shrink: 5, and basis: auto is rendered 1`] = `
+<div
+  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"
+/>
+`;
+
+exports[`OuiFlexItem is rendered 1`] = `
+<div
+  aria-label="aria-label"
+  class="ouiFlexItem testClass1 testClass2"
+  data-test-subj="test subject string"
+/>
+`;
+
+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"
+/>
+`;
+
+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 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"
+/>
+`;
+
+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_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 49cd501345..1b42d21155 100644
--- a/src/components/flex/_flex_item.scss
+++ b/src/components/flex/_flex_item.scss
@@ -24,18 +24,47 @@
 
   /*
    * 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 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
    */
+
   &.ouiFlexItem--flexGrowZero { /* 1 */
     flex-grow: 0; /* 2 */
     flex-basis: auto; /* 2 */
   }
 
-  @for $i from 1 through 10 {
-    &.ouiFlexItem--flexGrow#{$i} {
-      flex-grow: $i;
+  &.ouiFlexItem--flexShrinkZero { /* 1 */
+    flex-shrink: 0; /* 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 { /* 4 */
+    &.ouiFlexItem--flexShrink#{$i} { /* 4 */
+      flex-shrink: $i; /* 4 */
+    }
+  }
+
+  $flexBasisOptions: auto, max-content, min-content, fit-content; /* 4 */
+
+  @each $basis in $flexBasisOptions { /* 4 */
+    &.ouiFlexItem--flexBasis-#{$basis} { /* 4 */
+      flex-basis: $basis; /* 3 */
+    }
+  }
+
 }
 
 // On mobile we force them to stack and act the same.
diff --git a/src/components/flex/flex_item.test.tsx b/src/components/flex/flex_item.test.tsx
index d6b5781c80..15efd3df09 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 } from './flex_item';
+import {
+  OuiFlexItem,
+  GROW_SIZES,
+  SHRINK_SIZES,
+  BASIS_VALUES,
+} from './flex_item';
 
 beforeAll(startThrowingReactWarnings);
 afterAll(stopThrowingReactWarnings);
@@ -48,6 +53,7 @@ describe('OuiFlexItem', () => {
     expect(component).toMatchSnapshot();
   });
 
+  // Grow Values Only
   describe('grow', () => {
     GROW_SIZES.concat([true, false]).forEach((value) => {
       test(`${value} is rendered`, () => {
@@ -57,4 +63,92 @@ describe('OuiFlexItem', () => {
       });
     });
   });
+
+  // Shrink Values Only
+  describe('shrink', () => {
+    SHRINK_SIZES.forEach((value) => {
+      test(`${value} is rendered`, () => {
+        const component = render(<OuiFlexItem shrink={value} />);
+
+        expect(component).toMatchSnapshot();
+      });
+    });
+  });
+
+  // Basis Values Only
+  describe('basis', () => {
+    BASIS_VALUES.forEach((value) => {
+      test(`${value} is rendered`, () => {
+        const component = render(<OuiFlexItem basis={value} />);
+
+        expect(component).toMatchSnapshot();
+      });
+    });
+  });
+
+  // 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();
+          });
+        });
+      });
+    });
+  });
 });
diff --git a/src/components/flex/flex_item.tsx b/src/components/flex/flex_item.tsx
index 9d558c01a0..1ce3eb26b3 100644
--- a/src/components/flex/flex_item.tsx
+++ b/src/components/flex/flex_item.tsx
@@ -32,7 +32,9 @@ 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
   | 2
   | 3
@@ -43,16 +45,83 @@ 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
+  | 2
+  | 3
+  | 4
+  | 5
+  | 6
+  | 7
+  | 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;
+
 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 GROW_SIZES: FlexItemGrowSize[] = [
+  0,
+  1,
+  2,
+  3,
+  4,
+  5,
+  6,
+  7,
+  8,
+  9,
+  10,
+];
+export const SHRINK_SIZES: FlexItemShrinkSize[] = [
+  0,
+  1,
+  2,
+  3,
+  4,
+  5,
+  6,
+  7,
+  8,
+  9,
+  10,
+];
+export const BASIS_VALUES: FlexItemBasisValue[] = [
+  'auto',
+  'max-content',
+  'min-content',
+  'fit-content',
+];
 
 export const OuiFlexItem: FunctionComponent<
   CommonProps &
@@ -61,18 +130,38 @@ export const OuiFlexItem: FunctionComponent<
 > = ({
   children,
   className,
-  grow = true,
+  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
 }) => {
   validateGrowValue(grow);
+  validateShrinkValue(shrink);
+  validateBasisValue(basis);
 
   const classes = classNames(
     'ouiFlexItem',
     {
+      // 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 === false,
+      // 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'
+          ? SHRINK_SIZES.indexOf(shrink) >= 0
+          : undefined,
+      // use flex-basis: {basis}
+      [`ouiFlexItem--flexBasis-${basis}`]:
+        typeof basis === 'string'
+          ? BASIS_VALUES.indexOf(basis) >= 0
+          : undefined,
     },
     className
   );
@@ -94,3 +183,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', 'min-content', 'max-content', 'fit-content'], received \`${value}\``
+    );
+  }
+}