Question

我有一个包含四个元素的组件：

<div class="split-form">
  <div class="split form-column general-form" *ngIf="...">
  </div>

  <div class="form-msg split form-column" *ngIf="...">
  </div>

  <mat-tab-group class="split form-column form-tabs no-border" *ngIf="...">
  </mat-tab-group>

  <div class="split form-column calc-column" *ngIf="...">
  </div>
</div>

一般形式总是显示。如果只是等待数据准备就绪
form-msg显示是否选中了常规形式的复选框
mat-tab-group显示是否未选中常规形式的同一复选框
calc列显示是否未选中常规形式的同一复选框

Flexbox用于连续显示四个元素，其宽度为％。

.split-form {
  display: flex;
  flex: 1 1 auto;
  flex-flow: row nowrap;
  overflow: auto;
  padding-right: 0;
}

.general-form {
  max-width: 30%;
  flex: 1;
}

.form-msg {
  max-width: 60%;
  flex: 1;
}

.mat-tab-group {
  max-width: 60%;
  flex: 1;
}

.calc-column {
  flex: 1;
  max-width: 12%;
  padding-top: 50px;
}

在IE11中，当使用复选框切换form-msg和mat-tab-group / calc-column时，mat-tab-group和calc-column似乎可以切换宽度。它们开始正确->将其关闭->将其重新打开，然后断裂。在Chrome中不会发生这种情况。

我尝试为其创建一个堆栈闪电，但是它按预期工作。

调整窗口大小可解决此问题。

具有弹性的角度切换组件失去宽度

0 个答案: