fix(item): allow item to grow when it is used in a flex container

core/src/components/item/item.scss

@@ -80,6 +80,15 @@
 
   position: relative;
 
+  // When an item containing a select is inside of a
+  // flex container the item will collapse to 0px
+  // width due to the select setting the width to 0px.
+  // By setting the flex property here, we are
+  // allowing the item to grow to fill the flex container.
+  // If the item is inside of a block container this
+  // property will be ignored.
+  flex: 1;
+
   align-items: center;
   justify-content: space-between;
 

core/src/components/select/test/item/select.e2e.ts

@@ -41,5 +41,21 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       const list = page.locator('ion-list');
       await expect(list).toHaveScreenshot(screenshot(`select-inset-list-no-fill`));
     });
+    test('should render correctly in an item inside of a flex container', async ({ page }) => {
+      await page.setContent(
+        `
+        <div id="container" style="display: flex">
+          <ion-item>
+            <ion-select label="Fruit" value="apple">
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
+          </ion-item>
+        </div>
+      `,
+        config
+      );
+      const container = page.locator('#container');
+      await expect(container).toHaveScreenshot(screenshot(`select-item-flex-container`));
+    });
   });
 });