Attempting to showcase a lineup of items in a row using flex display. Development is being done with angular 7. Check out the HTML code I utilized:
<div class="d-flex">
<span>Other: </span>
<div class="d-flex">
<div *ngFor="let allergy of allergies; let i = index">
<span *ngIf="i > 0">,</span><span *ngIf="allergy"> {{ allergy }}</span>
<span *ngIf="!allergy">None</span>
</div>
</div>
</div>
The d-flex class leverages Bootstrap for its display properties:
.d-flex {
display: -webkit-box!important;
display: -ms-flexbox!important;
display: flex!important;
}
In the component, allergies is predefined as:
allergies = ['dermatological allergies', 'dust', 'pollen', 'mold'];
Visualization:
https://i.sstatic.net/86IGY.png
The current output illustrates improper breaking and distorted layout when the list surpasses the computed column width. How can the display be corrected to align correctly and break as expected? Suggestions on improving my inquiry or providing additional details are appreciated.