I am trying to make a text wrap inside a flex container but it just flows out of the sides of the container and I don't know why. I've tried placing word-wrap: break-word; everywhere, but it doesn't work.

the list of items:

<div *ngIf="operationItemList; else loading">
    <div class="list">
        <ng-container *ngFor="let operationMode of operationItemList">
            <div class="item operation_mode_item">
                <app-operation-mode-list-item [operationMode]="operationMode"
                    (click)="selectedOperationMode(operationMode)">
                </app-operation-mode-list-item>
            </div>
        </ng-container>
    </div>

    <p class="no_entries_label" *ngIf="operationItemList.length === 0">{{"MISC.NO_ENTRY_AVAILABLE" | translate}}</p>
</div>

the item:

<div class="operation_mode item_background">
    <h2>{{operationMode.description}}</h2>
</div>

list and item class:

@media only screen and (min-width: 650px) {
    .list {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        flex: auto;
    }

    .item {
        flex-basis: 100%;
        max-width: 306px;
        padding: 5px;
    }
}

item background class:

.item_background {
    background-color: #e2eef8;
}

operation_mode and hover class:

.operation_mode {
    display: flex;
    flex: auto;
    flex-direction: row;
    justify-content: center;
}

.operation_mode:hover {
    background-color: #90aed2;
    cursor: pointer;
}

operation mode item class:

.operation_mode_item {
    margin-bottom: 5px;
}

CodePudding user response：

You can try using word-break or overflow-wrap like this

.list {
    word-break: break-all;
}

.list {
    overflow-wrap: break-word;
}