Angular Material Flex给出了错误的尺寸

在"角度材质"布局库中设置flex的某些值似乎不起作用。

下面是一个非常简单的例子，展示了这种行为。正如你所看到的，如果你点击，一些值的大小是正确的，而其他值似乎没有任何意义。

http://codepen.io/anon/pen/RaQzxr

以前有人见过这个吗？

<div ng-cloak ng-app="MyApp">
  <div layout="row">
    <md-card flex="10">
      <h2>Card title #1</h2>
      <md-card-content>
        <p>This should be 10%!</p>
      </md-card-content>
    </md-card>
    <md-card flex>
    </md-card>
  </div>
  <div layout="row" layout-xs="column">
    <md-card flex="11">
      <h2>Card title #1</h2>
      <md-card-content>
        <p>This should be 11%!</p>
      </md-card-content>
    </md-card>
    <md-card flex>
    </md-card>
  </div>
  <div layout="row" layout-xs="column">
    <md-card flex="12.5">
      <h2>Card title #1</h2>
      <md-card-content>
        <p>This should be 12.5%!</p>
      </md-card-content>
    </md-card>
    <md-card flex>
    </md-card>
  </div>
  <div layout="row" layout-xs="column">
    <md-card flex="15">
      <h2>Card title #1</h2>
      <md-card-content>
        <p>This should be 15%!</p>
      </md-card-content>
    </md-card>
    <md-card flex>
    </md-card>
  </div>
  <div layout="row" layout-xs="column">
    <md-card flex="16">
      <h2>Card title #1</h2>
      <md-card-content>
        <p>This should be 16%!</p>
      </md-card-content>
    </md-card>
    <md-card flex>
  </div>
  <div layout="row" layout-xs="column">
    <md-card flex="19">
      <h2>Card title #1</h2>
      <md-card-content>
        <p>This should be 19%!</p>
      </md-card-content>
    </md-card>
    <md-card flex>
    </md-card>
  </div>
  <div layout="row" layout-xs="column">
    <md-card flex="20">
      <h2>Card title #1</h2>
      <md-card-content>
        <p>This should be 20%!</p>
      </md-card-content>
    </md-card>
    <md-card flex>
    </md-card>
  </div>
</div>