如何将 Angular 的 material2 下拉菜单与 CSS flexbox 一起使用？

Question

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

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

我错过了什么？

Answer 1

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

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

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

所以箭头是绝对定位的，不会被占位符推动

奇怪的是占位符的宽度改变了...

How can I use Angular's material2 dropdowns with CSS flexbox?