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

When an item containing a select is used inside of a flex container, the item collapses to `0px` width. Example code:

```html
<div style="display: flex">
  <ion-item>
    <ion-select aria-label="fruit" placeholder="Select fruit">
      <ion-select-option value="apples">Apples</ion-select-option>
      <ion-select-option value="oranges">Oranges</ion-select-option>
      <ion-select-option value="bananas">Bananas</ion-select-option>
    </ion-select>
  </ion-item>
</div>
```

This change sets the flex property to `1` on `ion-item` so that it will grow inside of a flex container, resulting in the select being displayed. The `flex` property is ignored when item is inside of a block container.

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`));
+    });
   });
 });