The text and the icon is not being responsive (Angular and scss)

img01 This is the problem. When I add more pax, the text is going under the icon.

Here is the code:

<div class="input-element pax-container trip-panel-fields">
<ng-container *ngTemplateOutlet="identityIcon"></ng-container>
<ey-pax-input-cont class="input"
formControlName="passengers"
[config]="config.paxInputContConfig"
[selectedAirports$]="selectedAirports$"
(registerInteraction)="registerSubformInteraction($event)">
</ey-pax-input-cont>
</div>


ey-pax-input-pres:

<div class="form-field-container">
<mat-form-field
class="block full-width"
[ngClass]="{'mat-form-field-invalid': hasDangerDisplayInput()}">
<input
matInput
readonly
eyInputPopover
[component]="extendablePaxForm"
[value]="translations.passengersWithCount | o3rTranslate:{passengerCount: paxFormGroup.value | travelersDescription$}"
[placeholder]="translations.passengers | o3rTranslate"
class="input-display"
(open)="onExpand()"
(cancel)="onCancel()"
(keydown.enter)="$event.preventDefault()"/>
<mat-icon matSuffix class="des-icon-chevron-down"></mat-icon>
</mat-form-field>
</div>


style file for this:

.pax-container {
display: flex;
align-items: center;

&.trip-panel-fields {
@include for-size(md-down) {
align-items: baseline;
}

.pax-icon {
@include for-size(md-up) {
align-self: center;
margin-left: .5rem;
}

position: relative;
top: .1875rem;

@include for-size(md-down) {
img {
width: 8px;
height: 10px;
}
}
}
}

.mat-mdc-input-element {
// @include for-size(md-up) {
// max-width: 4.6875rem;
// }
max-width: 3.75rem;
// width: auto;
// flex-grow: 1;
// flex-shrink: 1;
}

// .mat-icon {
// @include for-size(md-up) {
// width: 1rem;
// }
// }
}


Please help me I'm stuck on this for hourssss

I tried wrapping it in flex (display: flex). I don't want the width to be fixed. It should automatically move the icon as the text goes bigger an smaller. I tried flex-grow and flex shrink. Did not work

Continue reading...