title: Getting child layout items to flex by percentage
body: <p>I am using Angular Material layout directives and am having a problem getting child items to flex by certain percentages.</p>
  
  <p>Consider the following</p>
  
  <pre><code>&lt;md-card ng-app="MyApp"&gt;
    &lt;div layout="column" layout-gt-sm="row" layout-margin layout-fill&gt;
      &lt;div flex-gt-sm="25"&gt;
        &lt;label&gt;Status&lt;/label&gt;
        &lt;div&gt;Value&lt;/div&gt;
      &lt;/div&gt;
      &lt;div flex&gt;
        &lt;label&gt;Status&lt;/label&gt;
        &lt;div&gt;Value&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/md-card&gt;
  </code></pre>
  
  <p><a href="http://codepen.io/parky128/pen/Bzoabw" rel="nofollow">CodePen Demo</a> </p>
  
  <p>I would expect the first child to take up 25% of available space on screens above the <code>sm</code> breakpoint, and the second child to take up the rest (75%)</p>
  
  <p>But this is not the case, I did find though, that if I remove <code>layout="column"</code> from the parent and so only have <code>layout-gt-sm="row"</code>then it works fine.</p>
  
  <p>Why does it not work with both layout attributes defined?</p>