bug: md, outline select long label overflows outside of container

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

When you create an item with an ion-select multiple inside it, if there are many options selected, the displayed text overflows outside the item.

This does not happen when there are already fewer options selected (the text to display is shorter). This makes me think that it is not a problem with the select, but with the ion-item when it is in fill=outline mode and has a very long text to display.

Expected Behavior

The ion-item component should always look like in case 2, discussed above

Steps to Reproduce

<ion-item fill="outline" >

    <ion-label>My select</ion-label>

    <ion-select [value]="['1','2','3','4','5']" multiple="true">
        <ion-select-option value="1">Lorem 1</ion-select-option>
        <ion-select-option value="2">Lorem 2</ion-select-option>
        <ion-select-option value="3">Lorem 3</ion-select-option>
        <ion-select-option value="4">Lorem 4</ion-select-option>
        <ion-select-option value="5">Lorem 5</ion-select-option>
    </ion-select>

</ion-item>

At startup all default options are checked, causing the component to fail. As soon as you uncheck a couple of options, the component is already displayed correctly

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.17.1 (C:\Users\kikel\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 6.1.8 @angular-devkit/build-angular : 13.2.6 @angular-devkit/schematics : 13.2.6 @angular/cli : 13.2.6 @ionic/angular-toolkit : 6.1.0

Capacitor:

Capacitor CLI : 3.5.1 @capacitor/android : 3.5.1 @capacitor/core : 3.5.1 @capacitor/ios : not installed

Utility:

cordova-res : 0.15.4 native-run : 1.6.0

System:

NodeJS : v14.15.4 (C:\Program Files\nodejs\node.exe) npm : 6.14.10 OS : Windows 10

Additional Information

No response

[EinfachHans]

@liamdebeasi Removing overflow: visible doesn’t work in combination with a floating label:

Wouldn’t it work to set a max-width: 100% on .item-inner and .input-wrapper?:

[Joaovm3]

Sure @EinfachHans. I found a workaround for this bug:

@enrique-lozano Adding the width property with any value in pixels, the text reverts to behaving as it should.

However, how could I add this property manually using js?