Question

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

材料2选择框，应自动消耗所有给定空间
另一个宽度固定的容器，应始终可见并且固定为140px：

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

不幸的是，宽度：100％，覆盖整个弹性容器，因此隐藏了静态容器。

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

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

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

如何使用灵活的选择下拉列表存档140px宽的静态元素？

Answer 1

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

material2在灵活框中选择

1 个答案: