display flex does not break long lines as expected - html

Question

Trying to display a list of things in a single line using flex display. I am using angular 7 for development.
Below is the HTML I implemented:
<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>
d-flex is the bootstrap display class:
.d-flex {
display: -webkit-box!important;
display: -ms-flexbox!important;
display: flex!important;
}
In my component allergies is set to
allergies = ['dermatological allergies', 'dust', 'pollen', 'mold'];
Display:
As seen, the list does not break properly and the display is distorted. This happens when the list length exceeds the computed column width. How can I display it as a list that breaks properly as expected? Please let me know if I can improve my question or if I can provide any more information.

Answer 1

I think this is what you want:
<div class="d-flex">
<span>Other: </span>
<div>
<ng-container *ngFor="let allergy of allergies; let i = index">
<span *ngIf="allergy">{{ allergy }}</span><span *ngIf="i < allergies.length - 1">, </span>
<span *ngIf="!allergy">None</span>
</ng-container>
</div>
</div>
Here is a stackblitz example showing how this looks like.
Hope this helps...

Answer 2

With angular, I suggest you to use Flex-layout from Angular.
With your to wrap your item, use row wrap
With your code, you can also do:
<div class="d-flex">
...
...
<div *ngFor="let allergy of allergies; let i = index" class="d-flex">
...
</div>
</div>
</div>