如何在 CSS flexbox 中使用 Angular 材质 2 下拉菜单？答案

【问题标题】：How can I use Angular's material2 dropdowns with CSS flexbox?如何在 CSS flexbox 中使用 Angular 材质 2 下拉菜单？
【发布时间】：2017-07-18 23:06:21
【问题描述】：

我正在使用 Angular 的 flex-layout 库，但是当我创建一个包含 2 列且宽度为 50% 的行时遇到了问题。当以任何方式使用其中一个下拉列表时，另一列将缩小一点。检查 Chrome 中的元素，我没有看到任何会导致问题的明显内容。

您可以通过从Select #1 下拉列表中选择一个选项来重现该问题。

http://plnkr.co/edit/aL1qrrP3sX2XZQcfaglQ?p=preview

我错过了什么？

【问题讨论】：

标签： css angular flexbox angular-material2 angular-flex-layout

【解决方案1】：

问题在于，当您选择一个项目时，位于您的选择输入顶部的占位符的宽度增加了一些 javascript。就像在position: relative 中一样，它在 DOM 中的位置没有改变，所以它仍然像在选择字段中一样，但宽度增加了，这会将箭头向右推。

要解决此问题，您可以添加

.mat-select-arrow {
  position: absolute;
  right: 0;
}

所以箭头将处于绝对定位，不会被占位符推动。

奇怪的是占位符的宽度变了……

【讨论】：