使用layout = row和flex = auto

Question

我在单击md-select面板时出现了问题，这是在单击md-select组件后显示的。问题在于此面板太大，无法到达浏览器右端。

这是布局。当布局容器中只有一个元素时，例如s1或s2，则md-select面板具有正确计算的宽度。但是，当我尝试像下面的示例一样将两者合并到布局容器中时，在单击s2选择器后，md-select s2面板会变宽。

<div layout-padding layout-fill layout="row" layout-align="start center">
  <div flex="auto" id="s1">
    <md-select ng-model="ctrl.weeks" placeholder="Select first week">
      <md-option ng-value="1">One</md-option>
      <md-option ng-value="2">Two</md-option>
    </md-select>
  </div>
  <div flex="auto" id="s2">
    <md-select ng-model="ctrl.weeks" placeholder="Select second week">
      <md-option ng-value="1">One</md-option>
      <md-option ng-value="2">Two</md-option>
    </md-select>
  </div>
</div>

有人知道这种问题的解决方法吗？我没有使用任何样式的CSS技巧。看来这是一个错误。我正在使用angularjs 1.7.7和angular-material 1.1.13。