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

Question

I'm using Angular's flex-layout library, but running into an issue when I create a row with 2 columns whose widths are 50%. When one of the dropdowns is any way used, then the other column will shrink by a little bit. Inspecting the elements in Chrome, I'm not seeing anything obvious that would cause the issue.

You can reproduce the issue by selecting an option from the Select #1 dropdown.

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

What am I missing?

Answer 1

The problem is that when you select an item, the placeholder which goes to the top of your select input has its width increased by some javascript. As it is in position: relative, its place in the DOM doesn't change, so its still like it is in the select field but with an increased width, which push the arrow to the right.

To fix the issue, you can add

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

So the arrow will be in absolute positioning and won't be pushed by the placeholder.

It's strange though that the width of the placeholder is changed...