自定义flex容器上的CSS换行

Question

我试图在flex容器中进行文本换行，但它只是从容器的侧面流出，我不知道为什么。我试过在任何地方放置word-wrap: break-word;，但它不起作用。

项目列表：

<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>

项目：

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

列表和项目类别：

@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 {
background-color: #e2eef8;
}

operation_mode和悬停类：

.operation_mode {
display: flex;
flex: auto;
flex-direction: row;
justify-content: center;
}
.operation_mode:hover {
background-color: #90aed2;
cursor: pointer;
}

操作模式项目类别：

.operation_mode_item {
margin-bottom: 5px;
}

Answer 1

您可以尝试使用类似于此的word-break或overflow-wrap

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