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

[brandyscarney]

Issue number: N/A

---

What is the current behavior?

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

<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>

Note

This bug was introduced in feature-7.6 by this commit. It cannot be reproduced on main.

What is the new behavior?

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. This property is ignored when inside of a block container.

Does this introduce a breaking change?

• Yes
• No

Other information

feature-7.6	branch

[averyrousseau]

Fix looks good. Should we add a test for this?

[brandyscarney]

I meant to add that in the description - I can add a test if we want one. Should it go in item?

[averyrousseau]

Is there a way to show the change in behavior without ion-select? If not, I think it should go in select, but I could be convinced either way 🤷

[brandyscarney]

Yeah I couldn't reproduce it outside of select so I added it to the select tests here: 6d0d490

Running screenshots now.

[liamdebeasi]

Removing myself from review since there are two approvals already. Lmk if you would still like me to look though!