diff --git a/packages/bedrock-layout-css/src/components/column-drop.css b/packages/bedrock-layout-css/src/components/column-drop.css
index 74c58041e1..90fd42fcfd 100644
--- a/packages/bedrock-layout-css/src/components/column-drop.css
+++ b/packages/bedrock-layout-css/src/components/column-drop.css
@@ -8,7 +8,7 @@
   initial-value: 0;
 }
 
-@property --basis {
+@property --minItemWidth {
   syntax: "";
   inherits: true;
   initial-value: 159px;
@@ -24,7 +24,7 @@
 
 [data-bedrock-column-drop] > * {
   margin: 0;
-  flex-basis: var(--basis, 159px);
+  flex-basis: var(--minItemWidth, 159px);
   flex-grow: 1;
   flex-shrink: 1;
 }
diff --git a/packages/bedrock-layout-css/src/components/inline.css b/packages/bedrock-layout-css/src/components/inline.css
index 0622bd6091..137c53e758 100644
--- a/packages/bedrock-layout-css/src/components/inline.css
+++ b/packages/bedrock-layout-css/src/components/inline.css
@@ -13,6 +13,12 @@
   initial-value: 0;
 }
 
+@property --minItemWidth {
+  syntax: "";
+  inherits: false;
+  initial-value: 0;
+}
+
 [data-bedrock-inline] {
   display: flex;
   flex-wrap: nowrap;
@@ -25,11 +31,14 @@
   margin: 0;
 }
 
+[data-bedrock-inline][style*="--minItemWidth"] > * {
+  min-inline-size: var(--minItemWidth, 0);
+}
+
 [data-bedrock-inline][style*="--switchAt"] {
   flex-wrap: wrap;
 }
 [data-bedrock-inline][style*="--switchAt"] > * {
-  min-inline-size: fit-content;
   flex-basis: calc((var(--switchAt) - (100% - var(--gutter, 0px))) * 999);
 }
 
diff --git a/packages/column-drop/__tests__/__snapshots__/column-drop.test.jsx.snap b/packages/column-drop/__tests__/__snapshots__/column-drop.test.jsx.snap
index 571f6c9214..6b9f166c99 100644
--- a/packages/column-drop/__tests__/__snapshots__/column-drop.test.jsx.snap
+++ b/packages/column-drop/__tests__/__snapshots__/column-drop.test.jsx.snap
@@ -19,9 +19,9 @@ exports[`ColumnDrop > correct usage > renders all the gutter options 1`] = `
 
 .c0 > * {
   margin: 0;
-  -webkit-flex-basis: var(--basis,159px);
-  -ms-flex-preferred-size: var(--basis,159px);
-  flex-basis: var(--basis,159px);
+  -webkit-flex-basis: var(--minItemWidth,159px);
+  -ms-flex-preferred-size: var(--minItemWidth,159px);
+  flex-basis: var(--minItemWidth,159px);
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -36,8 +36,8 @@ exports[`ColumnDrop > correct usage > renders all the gutter options 1`] = `
   data-bedrock-column-drop=""
   style={
     {
-      "--basis": undefined,
       "--gutter": "0px",
+      "--minItemWidth": undefined,
     }
   }
 >
@@ -75,9 +75,9 @@ exports[`ColumnDrop > correct usage > renders all the gutter options 2`] = `
 
 .c0 > * {
   margin: 0;
-  -webkit-flex-basis: var(--basis,159px);
-  -ms-flex-preferred-size: var(--basis,159px);
-  flex-basis: var(--basis,159px);
+  -webkit-flex-basis: var(--minItemWidth,159px);
+  -ms-flex-preferred-size: var(--minItemWidth,159px);
+  flex-basis: var(--minItemWidth,159px);
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -92,8 +92,8 @@ exports[`ColumnDrop > correct usage > renders all the gutter options 2`] = `
   data-bedrock-column-drop=""
   style={
     {
-      "--basis": undefined,
       "--gutter": "0.0625rem",
+      "--minItemWidth": undefined,
     }
   }
 >
@@ -131,9 +131,9 @@ exports[`ColumnDrop > correct usage > renders all the gutter options 3`] = `
 
 .c0 > * {
   margin: 0;
-  -webkit-flex-basis: var(--basis,159px);
-  -ms-flex-preferred-size: var(--basis,159px);
-  flex-basis: var(--basis,159px);
+  -webkit-flex-basis: var(--minItemWidth,159px);
+  -ms-flex-preferred-size: var(--minItemWidth,159px);
+  flex-basis: var(--minItemWidth,159px);
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -148,8 +148,8 @@ exports[`ColumnDrop > correct usage > renders all the gutter options 3`] = `
   data-bedrock-column-drop=""
   style={
     {
-      "--basis": undefined,
       "--gutter": "0.125rem",
+      "--minItemWidth": undefined,
     }
   }
 >
@@ -187,9 +187,9 @@ exports[`ColumnDrop > correct usage > renders all the gutter options 4`] = `
 
 .c0 > * {
   margin: 0;
-  -webkit-flex-basis: var(--basis,159px);
-  -ms-flex-preferred-size: var(--basis,159px);
-  flex-basis: var(--basis,159px);
+  -webkit-flex-basis: var(--minItemWidth,159px);
+  -ms-flex-preferred-size: var(--minItemWidth,159px);
+  flex-basis: var(--minItemWidth,159px);
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -204,8 +204,8 @@ exports[`ColumnDrop > correct usage > renders all the gutter options 4`] = `
   data-bedrock-column-drop=""
   style={
     {
-      "--basis": undefined,
       "--gutter": "0.25rem",
+      "--minItemWidth": undefined,
     }
   }
 >
@@ -243,9 +243,9 @@ exports[`ColumnDrop > correct usage > renders all the gutter options 5`] = `
 
 .c0 > * {
   margin: 0;
-  -webkit-flex-basis: var(--basis,159px);
-  -ms-flex-preferred-size: var(--basis,159px);
-  flex-basis: var(--basis,159px);
+  -webkit-flex-basis: var(--minItemWidth,159px);
+  -ms-flex-preferred-size: var(--minItemWidth,159px);
+  flex-basis: var(--minItemWidth,159px);
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -260,8 +260,8 @@ exports[`ColumnDrop > correct usage > renders all the gutter options 5`] = `
   data-bedrock-column-drop=""
   style={
     {
-      "--basis": undefined,
       "--gutter": "0.5rem",
+      "--minItemWidth": undefined,
     }
   }
 >
@@ -299,9 +299,9 @@ exports[`ColumnDrop > correct usage > renders all the gutter options 6`] = `
 
 .c0 > * {
   margin: 0;
-  -webkit-flex-basis: var(--basis,159px);
-  -ms-flex-preferred-size: var(--basis,159px);
-  flex-basis: var(--basis,159px);
+  -webkit-flex-basis: var(--minItemWidth,159px);
+  -ms-flex-preferred-size: var(--minItemWidth,159px);
+  flex-basis: var(--minItemWidth,159px);
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -316,8 +316,8 @@ exports[`ColumnDrop > correct usage > renders all the gutter options 6`] = `
   data-bedrock-column-drop=""
   style={
     {
-      "--basis": undefined,
       "--gutter": "0.75rem",
+      "--minItemWidth": undefined,
     }
   }
 >
@@ -355,9 +355,9 @@ exports[`ColumnDrop > correct usage > renders all the gutter options 7`] = `
 
 .c0 > * {
   margin: 0;
-  -webkit-flex-basis: var(--basis,159px);
-  -ms-flex-preferred-size: var(--basis,159px);
-  flex-basis: var(--basis,159px);
+  -webkit-flex-basis: var(--minItemWidth,159px);
+  -ms-flex-preferred-size: var(--minItemWidth,159px);
+  flex-basis: var(--minItemWidth,159px);
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -372,8 +372,8 @@ exports[`ColumnDrop > correct usage > renders all the gutter options 7`] = `
   data-bedrock-column-drop=""
   style={
     {
-      "--basis": undefined,
       "--gutter": "1rem",
+      "--minItemWidth": undefined,
     }
   }
 >
@@ -411,9 +411,9 @@ exports[`ColumnDrop > correct usage > renders all the gutter options 8`] = `
 
 .c0 > * {
   margin: 0;
-  -webkit-flex-basis: var(--basis,159px);
-  -ms-flex-preferred-size: var(--basis,159px);
-  flex-basis: var(--basis,159px);
+  -webkit-flex-basis: var(--minItemWidth,159px);
+  -ms-flex-preferred-size: var(--minItemWidth,159px);
+  flex-basis: var(--minItemWidth,159px);
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -428,8 +428,8 @@ exports[`ColumnDrop > correct usage > renders all the gutter options 8`] = `
   data-bedrock-column-drop=""
   style={
     {
-      "--basis": undefined,
       "--gutter": "1.5rem",
+      "--minItemWidth": undefined,
     }
   }
 >
@@ -467,9 +467,9 @@ exports[`ColumnDrop > correct usage > renders all the gutter options 9`] = `
 
 .c0 > * {
   margin: 0;
-  -webkit-flex-basis: var(--basis,159px);
-  -ms-flex-preferred-size: var(--basis,159px);
-  flex-basis: var(--basis,159px);
+  -webkit-flex-basis: var(--minItemWidth,159px);
+  -ms-flex-preferred-size: var(--minItemWidth,159px);
+  flex-basis: var(--minItemWidth,159px);
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -484,8 +484,8 @@ exports[`ColumnDrop > correct usage > renders all the gutter options 9`] = `
   data-bedrock-column-drop=""
   style={
     {
-      "--basis": undefined,
       "--gutter": "2rem",
+      "--minItemWidth": undefined,
     }
   }
 >
@@ -523,9 +523,9 @@ exports[`ColumnDrop > correct usage > renders all the gutter options 10`] = `
 
 .c0 > * {
   margin: 0;
-  -webkit-flex-basis: var(--basis,159px);
-  -ms-flex-preferred-size: var(--basis,159px);
-  flex-basis: var(--basis,159px);
+  -webkit-flex-basis: var(--minItemWidth,159px);
+  -ms-flex-preferred-size: var(--minItemWidth,159px);
+  flex-basis: var(--minItemWidth,159px);
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -540,8 +540,8 @@ exports[`ColumnDrop > correct usage > renders all the gutter options 10`] = `
   data-bedrock-column-drop=""
   style={
     {
-      "--basis": undefined,
       "--gutter": "3rem",
+      "--minItemWidth": undefined,
     }
   }
 >
@@ -579,9 +579,9 @@ exports[`ColumnDrop > correct usage > renders all the gutter options 11`] = `
 
 .c0 > * {
   margin: 0;
-  -webkit-flex-basis: var(--basis,159px);
-  -ms-flex-preferred-size: var(--basis,159px);
-  flex-basis: var(--basis,159px);
+  -webkit-flex-basis: var(--minItemWidth,159px);
+  -ms-flex-preferred-size: var(--minItemWidth,159px);
+  flex-basis: var(--minItemWidth,159px);
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -596,8 +596,8 @@ exports[`ColumnDrop > correct usage > renders all the gutter options 11`] = `
   data-bedrock-column-drop=""
   style={
     {
-      "--basis": undefined,
       "--gutter": "4rem",
+      "--minItemWidth": undefined,
     }
   }
 >
@@ -616,7 +616,7 @@ exports[`ColumnDrop > correct usage > renders all the gutter options 11`] = `
 
 `;
 
-exports[`ColumnDrop > correct usage > renders custom basis 1`] = `
+exports[`ColumnDrop > correct usage > renders custom gutter with number 1`] = `
 .c0 {
   box-sizing: border-box;
   display: -webkit-box;
@@ -635,9 +635,9 @@ exports[`ColumnDrop > correct usage > renders custom basis 1`] = `
 
 .c0 > * {
   margin: 0;
-  -webkit-flex-basis: var(--basis,159px);
-  -ms-flex-preferred-size: var(--basis,159px);
-  flex-basis: var(--basis,159px);
+  -webkit-flex-basis: var(--minItemWidth,159px);
+  -ms-flex-preferred-size: var(--minItemWidth,159px);
+  flex-basis: var(--minItemWidth,159px);
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -652,8 +652,8 @@ exports[`ColumnDrop > correct usage > renders custom basis 1`] = `
   data-bedrock-column-drop=""
   style={
     {
-      "--basis": "320px",
-      "--gutter": "1rem",
+      "--gutter": "320px",
+      "--minItemWidth": undefined,
     }
   }
 >
@@ -672,7 +672,7 @@ exports[`ColumnDrop > correct usage > renders custom basis 1`] = `
 
 `;
 
-exports[`ColumnDrop > correct usage > renders custom basis as string 1`] = `
+exports[`ColumnDrop > correct usage > renders custom gutter with number 2`] = `
 .c0 {
   box-sizing: border-box;
   display: -webkit-box;
@@ -691,9 +691,9 @@ exports[`ColumnDrop > correct usage > renders custom basis as string 1`] = `
 
 .c0 > * {
   margin: 0;
-  -webkit-flex-basis: var(--basis,159px);
-  -ms-flex-preferred-size: var(--basis,159px);
-  flex-basis: var(--basis,159px);
+  -webkit-flex-basis: var(--minItemWidth,159px);
+  -ms-flex-preferred-size: var(--minItemWidth,159px);
+  flex-basis: var(--minItemWidth,159px);
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -708,8 +708,8 @@ exports[`ColumnDrop > correct usage > renders custom basis as string 1`] = `
   data-bedrock-column-drop=""
   style={
     {
-      "--basis": "32rem",
-      "--gutter": "1rem",
+      "--gutter": "60ch",
+      "--minItemWidth": undefined,
     }
   }
 >
@@ -728,7 +728,7 @@ exports[`ColumnDrop > correct usage > renders custom basis as string 1`] = `
 
 `;
 
-exports[`ColumnDrop > correct usage > renders custom gutter with number 1`] = `
+exports[`ColumnDrop > correct usage > renders custom minItemWidth 1`] = `
 .c0 {
   box-sizing: border-box;
   display: -webkit-box;
@@ -747,9 +747,9 @@ exports[`ColumnDrop > correct usage > renders custom gutter with number 1`] = `
 
 .c0 > * {
   margin: 0;
-  -webkit-flex-basis: var(--basis,159px);
-  -ms-flex-preferred-size: var(--basis,159px);
-  flex-basis: var(--basis,159px);
+  -webkit-flex-basis: var(--minItemWidth,159px);
+  -ms-flex-preferred-size: var(--minItemWidth,159px);
+  flex-basis: var(--minItemWidth,159px);
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -764,8 +764,8 @@ exports[`ColumnDrop > correct usage > renders custom gutter with number 1`] = `
   data-bedrock-column-drop=""
   style={
     {
-      "--basis": undefined,
-      "--gutter": "320px",
+      "--gutter": "1rem",
+      "--minItemWidth": "320px",
     }
   }
 >
@@ -784,7 +784,7 @@ exports[`ColumnDrop > correct usage > renders custom gutter with number 1`] = `
 
 `;
 
-exports[`ColumnDrop > correct usage > renders custom gutter with number 2`] = `
+exports[`ColumnDrop > correct usage > renders custom minItemWidth as string 1`] = `
 .c0 {
   box-sizing: border-box;
   display: -webkit-box;
@@ -803,9 +803,9 @@ exports[`ColumnDrop > correct usage > renders custom gutter with number 2`] = `
 
 .c0 > * {
   margin: 0;
-  -webkit-flex-basis: var(--basis,159px);
-  -ms-flex-preferred-size: var(--basis,159px);
-  flex-basis: var(--basis,159px);
+  -webkit-flex-basis: var(--minItemWidth,159px);
+  -ms-flex-preferred-size: var(--minItemWidth,159px);
+  flex-basis: var(--minItemWidth,159px);
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -820,8 +820,8 @@ exports[`ColumnDrop > correct usage > renders custom gutter with number 2`] = `
   data-bedrock-column-drop=""
   style={
     {
-      "--basis": undefined,
-      "--gutter": "60ch",
+      "--gutter": "1rem",
+      "--minItemWidth": "32rem",
     }
   }
 >
@@ -859,9 +859,9 @@ exports[`ColumnDrop > correct usage > renders default gutter of 0px when no gutt
 
 .c0 > * {
   margin: 0;
-  -webkit-flex-basis: var(--basis,159px);
-  -ms-flex-preferred-size: var(--basis,159px);
-  flex-basis: var(--basis,159px);
+  -webkit-flex-basis: var(--minItemWidth,159px);
+  -ms-flex-preferred-size: var(--minItemWidth,159px);
+  flex-basis: var(--minItemWidth,159px);
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -876,8 +876,8 @@ exports[`ColumnDrop > correct usage > renders default gutter of 0px when no gutt
   data-bedrock-column-drop=""
   style={
     {
-      "--basis": undefined,
       "--gutter": undefined,
+      "--minItemWidth": undefined,
     }
   }
 >
@@ -915,9 +915,9 @@ exports[`ColumnDrop > correct usage > renders with no stretch columns 1`] = `
 
 .c0 > * {
   margin: 0;
-  -webkit-flex-basis: var(--basis,159px);
-  -ms-flex-preferred-size: var(--basis,159px);
-  flex-basis: var(--basis,159px);
+  -webkit-flex-basis: var(--minItemWidth,159px);
+  -ms-flex-preferred-size: var(--minItemWidth,159px);
+  flex-basis: var(--minItemWidth,159px);
   -webkit-box-flex: 0;
   -webkit-flex-grow: 0;
   -ms-flex-positive: 0;
@@ -932,8 +932,8 @@ exports[`ColumnDrop > correct usage > renders with no stretch columns 1`] = `
   data-bedrock-column-drop="no-stretched-columns"
   style={
     {
-      "--basis": undefined,
       "--gutter": "1rem",
+      "--minItemWidth": undefined,
     }
   }
 >
@@ -971,9 +971,9 @@ exports[`ColumnDrop > correct usage > renders with theme overrides 1`] = `
 
 .c0 > * {
   margin: 0;
-  -webkit-flex-basis: var(--basis,159px);
-  -ms-flex-preferred-size: var(--basis,159px);
-  flex-basis: var(--basis,159px);
+  -webkit-flex-basis: var(--minItemWidth,159px);
+  -ms-flex-preferred-size: var(--minItemWidth,159px);
+  flex-basis: var(--minItemWidth,159px);
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -988,8 +988,8 @@ exports[`ColumnDrop > correct usage > renders with theme overrides 1`] = `
   data-bedrock-column-drop=""
   style={
     {
-      "--basis": undefined,
       "--gutter": "200px",
+      "--minItemWidth": undefined,
     }
   }
 >
@@ -1027,9 +1027,9 @@ exports[`ColumnDrop > incorrect usage > renders default with console error with
 
 .c0 > * {
   margin: 0;
-  -webkit-flex-basis: var(--basis,159px);
-  -ms-flex-preferred-size: var(--basis,159px);
-  flex-basis: var(--basis,159px);
+  -webkit-flex-basis: var(--minItemWidth,159px);
+  -ms-flex-preferred-size: var(--minItemWidth,159px);
+  flex-basis: var(--minItemWidth,159px);
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -1044,8 +1044,8 @@ exports[`ColumnDrop > incorrect usage > renders default with console error with
   data-bedrock-column-drop=""
   style={
     {
-      "--basis": undefined,
       "--gutter": "1rem",
+      "--minItemWidth": undefined,
     }
   }
 >
@@ -1064,7 +1064,7 @@ exports[`ColumnDrop > incorrect usage > renders default with console error with
 
 `;
 
-exports[`ColumnDrop > incorrect usage > renders default with console error with basis input 1`] = `
+exports[`ColumnDrop > incorrect usage > renders default with console error with incorrect noStretchColumns input 1`] = `
 .c0 {
   box-sizing: border-box;
   display: -webkit-box;
@@ -1083,13 +1083,13 @@ exports[`ColumnDrop > incorrect usage > renders default with console error with
 
 .c0 > * {
   margin: 0;
-  -webkit-flex-basis: var(--basis,159px);
-  -ms-flex-preferred-size: var(--basis,159px);
-  flex-basis: var(--basis,159px);
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
+  -webkit-flex-basis: var(--minItemWidth,159px);
+  -ms-flex-preferred-size: var(--minItemWidth,159px);
+  flex-basis: var(--minItemWidth,159px);
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
   -webkit-flex-shrink: 1;
   -ms-flex-negative: 1;
   flex-shrink: 1;
@@ -1100,8 +1100,8 @@ exports[`ColumnDrop > incorrect usage > renders default with console error with
   data-bedrock-column-drop=""
   style={
     {
-      "--basis": undefined,
       "--gutter": "1rem",
+      "--minItemWidth": undefined,
     }
   }
 >
@@ -1120,7 +1120,7 @@ exports[`ColumnDrop > incorrect usage > renders default with console error with
 
 `;
 
-exports[`ColumnDrop > incorrect usage > renders default with console error with incorrect noStretchColumns input 1`] = `
+exports[`ColumnDrop > incorrect usage > renders default with console error with minItemWidth input 1`] = `
 .c0 {
   box-sizing: border-box;
   display: -webkit-box;
@@ -1139,13 +1139,13 @@ exports[`ColumnDrop > incorrect usage > renders default with console error with
 
 .c0 > * {
   margin: 0;
-  -webkit-flex-basis: var(--basis,159px);
-  -ms-flex-preferred-size: var(--basis,159px);
-  flex-basis: var(--basis,159px);
-  -webkit-box-flex: 0;
-  -webkit-flex-grow: 0;
-  -ms-flex-positive: 0;
-  flex-grow: 0;
+  -webkit-flex-basis: var(--minItemWidth,159px);
+  -ms-flex-preferred-size: var(--minItemWidth,159px);
+  flex-basis: var(--minItemWidth,159px);
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
   -webkit-flex-shrink: 1;
   -ms-flex-negative: 1;
   flex-shrink: 1;
@@ -1156,8 +1156,8 @@ exports[`ColumnDrop > incorrect usage > renders default with console error with
   data-bedrock-column-drop=""
   style={
     {
-      "--basis": undefined,
       "--gutter": "1rem",
+      "--minItemWidth": undefined,
     }
   }
 >
@@ -1195,9 +1195,9 @@ exports[`ColumnDrop > incorrect usage > renders default with wrong gutter input
 
 .c0 > * {
   margin: 0;
-  -webkit-flex-basis: var(--basis,159px);
-  -ms-flex-preferred-size: var(--basis,159px);
-  flex-basis: var(--basis,159px);
+  -webkit-flex-basis: var(--minItemWidth,159px);
+  -ms-flex-preferred-size: var(--minItemWidth,159px);
+  flex-basis: var(--minItemWidth,159px);
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -1212,8 +1212,8 @@ exports[`ColumnDrop > incorrect usage > renders default with wrong gutter input
   data-bedrock-column-drop=""
   style={
     {
-      "--basis": undefined,
       "--gutter": undefined,
+      "--minItemWidth": undefined,
     }
   }
 >
diff --git a/packages/column-drop/__tests__/column-drop.test.jsx b/packages/column-drop/__tests__/column-drop.test.jsx
index f72c662a96..71028e5c26 100644
--- a/packages/column-drop/__tests__/column-drop.test.jsx
+++ b/packages/column-drop/__tests__/column-drop.test.jsx
@@ -70,9 +70,9 @@ describe("ColumnDrop", () => {
       expect(errorStack.toJSON()).toMatchSnapshot();
     });
 
-    it("renders custom basis", () => {
+    it("renders custom minItemWidth", () => {
       const columnDrop = create(
-        
+        
           
         
       );
@@ -88,9 +88,9 @@ describe("ColumnDrop", () => {
       expect(columnDrop.toJSON()).toMatchSnapshot();
     });
 
-    it("renders custom basis as string", () => {
+    it("renders custom minItemWidth as string", () => {
       const columnDrop = create(
-        
+        
           
         
       );
@@ -135,11 +135,11 @@ describe("ColumnDrop", () => {
       expect(errorStack.toJSON()).toMatchSnapshot();
     });
 
-    it("renders default with console error with basis input", () => {
+    it("renders default with console error with minItemWidth input", () => {
       expect(console.error).not.toBeCalled();
 
       const errorStack = create(
-        
+        
           
         
       );
@@ -165,7 +165,7 @@ describe("ColumnDrop", () => {
       expect(console.error).not.toBeCalled();
 
       const errorStack = create(
-        
+        
           
         
       );
diff --git a/packages/column-drop/examples/ColumnDrop.stories.mdx b/packages/column-drop/examples/ColumnDrop.stories.mdx
index f7a47c7b21..04e60c2e07 100644
--- a/packages/column-drop/examples/ColumnDrop.stories.mdx
+++ b/packages/column-drop/examples/ColumnDrop.stories.mdx
@@ -127,15 +127,15 @@ Here are the possible values for `gutter` by default: