Angularjs 角度材质中的子项上具有flex属性的意外行为

我正在布局容器中的子项上使用角度材质及其弹性属性

特别是，我有行布局，希望子项占据相等的空间，因此我有：

<div layout="column" layout-gt-sm="row">
    <md-input-container flex>
        <label>Input</label>
        <input >
    </md-input-container>
    <md-input-container flex>
        <label translate>Select</label>
        <md-select ng-model="">
            <md-option>
            </md-option>
        </md-select>
    </md-input-container>
</div>

输入
挑选

但我发现第一个孩子比第二个孩子宽

但是，如果我将

flex=“50”

应用于子项，它们会占用相同的空间，请参见Codepen演示-

这也使用了Angle Material的最新版本-1.1.0

这是否意味着我必须在需要时明确设置弹性百分比？在第一个示例中，根据我的代码笔，我会认为这两个子项将占据相等的宽度

更新

我发现只有当我有一个包含输入和md-select的行布局（都在md-input容器中）时，我才会出现这种行为

见-

您可以看到第一张卡片显示问题。如果在这些输入容器上将flex设置为flex=“50”，则它们的大小会很好

更新2

---

好的，所以我在AM repo上发布了一个问题，他们的回答是坚持使用flex=50，否则您无法保证相关浏览器将如何计算宽度-

它不起作用，因为flex在

layout=“column”和layout gt sm=“row”

之间混淆。将

layout=“column”替换为layout=“row”

，然后将其划分为相等的宽度。否则，您必须明确地告诉他们

flex=50

。好的，但我希望这些输入容器在显示在较小屏幕上时垂直堆叠，所以对小屏幕使用布局，如

layout xs=“column”和layout sm=“column”

，而不是

layout=“column”

。是的，我知道，如果我能把它写成

layout=“column”layout gt sm=“row”

我在很多地方都使用了这个布局，那么它将需要在我的文件中添加一堆额外的属性OK我知道这只是当我有一个输入后跟一个md select时的一个问题，请参阅我的更新它不起作用，因为flex混淆了

layout=“column”和layout gt sm=“row”

。将

layout=“column”替换为layout=“row”

，然后将其划分为相等的宽度。否则，您必须明确地告诉他们

flex=50

。好的，但我希望这些输入容器在显示在较小屏幕上时垂直堆叠，所以对小屏幕使用布局，如

layout xs=“column”和layout sm=“column”

，而不是

layout=“column”

。是的，我知道，如果我能把它写成

layout=“column”layout gt sm=“row”

我在很多地方都使用了这个布局，那么它将需要在我的文件中添加一堆额外的属性。好吧，我知道这只是一个问题，当我有一个输入，然后是一个md select，请参阅我的更新