html - 在 HTML 中显示视图的奇怪行为

Question

如下图所示，在初始化div时隐藏的视图无法正确显示。

这条线应该上升到 div 的一侧。CSS 中没有任何东西会影响它。这是否被认为是正常行为，我应该更改视口或其他什么？

为了澄清起见，它是用 Angular 完成的。我展示的示例是使用 Clarity 并且是模态的，但我在同一个组件上也有问题，但在模态之外，所以我很确定不涉及模态。

HTML：

<clr-modal [(clrModalOpen)]="openModal">
<h3 class="modal-title">Confirmation d'importation</h3>
<div class="modal-body" *ngIf="parsedCsv !== undefined">
    <p>Vérifiez que les colonnes correspondent bien aux informations.</p>
    <div class="list" *ngFor="let column of sampleArrayDisplay.slice(0,1)">
        <div class="box display" *ngFor="let sample of column">
            <p>{{sample}}</p>
        </div>
    </div>
    <div class="list" *ngFor="let column of sampleArrayDisplay.slice(1, 10)">
        <div class="box display box-data" *ngFor="let data of column">{{data}}</div>
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-danger" (click)="openModal = false">Annuler</button>
    <button type="button" class="btn btn-success" (click)="onImport()">Importer</button>
</div>

社会保障体系：

.list {
 max-width: 100%;
 border: solid 1px #ccc;
 min-height: 60px;
 display: flex;
 flex-direction: row;
 background: white;
 border-radius: 4px;
 overflow-wrap: break-word;
}

.box {
 width: 100px;
 min-width: 100px;
 padding: 20px 10px;
 border-right: solid 1px #ccc;
 color: rgba(0, 0, 0, 0.87);
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: space-between;
 box-sizing: border-box;
 cursor: move;
 background: white;
 font-size: 14px;
 flex-grow: 1;
 flex-basis: 0;
}

干杯

标签： htmlcssviewport