There seems to be a problem with certain values for setting the flex property in the Angular Material layout library.
The issue is clearly demonstrated in this straightforward example. By clicking through, you can observe that some values display correctly while others appear to be illogical.
If you are interested, you can view the demonstration here: http://codepen.io/anon/pen/RaQzxr
Has anyone encountered this issue before and found a solution?
<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>