材料2选择在柔性盒中

Question

我有一个任意宽度的容器，在里面我使用 flexbox，有：

1. material2 选择框，应该会自动用完所有给定空间
2. 旁边有一个固定宽度的另一个容器，它应该始终可见并且具有 140 像素的固定宽度：

  <div style="display: flex; display: -webkit-flex; width: 300px;">
    <div style="flex-grow: 1;">
      <mat-form-field style="width:100%">
        <mat-select placeholder="Favorite food" [(ngModel)]="selectedValue" name="food">
          <mat-option *ngFor="let food of foods" [value]="food.value">
            {{food.viewValue}}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </div>
    <div style="flex-basis: 140px; flex-grow: 0; background-color: #f00;">

    </div>
  </div>

不幸的是 width:100% 覆盖了整个弹性容器，因此隐藏了静态容器。

在我的 plunker 中，你可以看到红色区域是我的静态元素：

https://plnkr.co/edit/E1BE26Zd8L5D3yc6SPPw?p=preview

红色区域应始终为 140px 宽，但在示例中它只能占用 100px，因为 mat-form-field 已经需要 200px（这是默认值）。但是，如果我像示例中那样将 200px 宽度更改为 100%，则容器将覆盖 所有内容。

如何归档一个 140 像素宽的静态元素，旁边有一个灵活的选择下拉菜单？

Answer 1

尝试将flex-basis: 0 添加到包含mat-form-field 的div 的样式中。这将适用于您的 width: 100% 修改。