CSS flexboxでAngularのmaterial2ドロップダウンを使用するにはどうすればよいですか？

Question

私はAngularのフレックスレイアウトライブラリを使用していますが、幅が50％の2列の行を作成すると問題が発生します。ドロップダウンのいずれかが使用されると、もう一方の列は少し縮小します。 Chromeの要素を調べると、問題の原因となるようなものは何も目に見えません。

Select #1プルダウンからオプションを選択して問題を再現できます。

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

私は何をしないのですか？

Answer 1

問題は、項目を選択すると、選択入力の先頭に移動するプレースホルダの幅がJavaScriptによって増えてしまうことです。 position: relativeにあるように、DOM内の場所は変わらないので、それはまだ選択フィールドにありますが、幅が増えて矢印が右に移動します。問題を解決するには

は、あなたが

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

を追加することができますので、矢印は、絶対位置になり、プレースホルダによって押されることはありません。

プレースホルダの幅が変更されても奇妙です...