Angular Material flex="50" only for layout="row"
<p>We are using angular-material to create a new respsonsive website.</p>

<p>For now we only use the flex-layouts from angular-material.
We have code like this:</p>

<pre><code>&lt;div layout="column" layout-gt-md="row"&gt;
    &lt;div flex="50"&gt;
        Here's some text without a fixed length.
    &lt;/div&gt;
    &lt;div flex="50"&gt;
        Here's some text without a fixed length.
   &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>In this case we want to achieve, that we have rows (left to right) on large displays with a width of 50% each.
But the problem is: if its  a medium or smaller device, it has 50% height (<code>max-height</code> to be more precise) which causes some overlap with the other <code>div</code> as the text is longer than the 50% height of the <code>div</code>.</p>

<p>How can we achieve, that the <code>flex="50"</code> only applies for <code>layout="row"</code> and the column height adapts to the content size?
Overriding the CSS class to</p>

<pre><code>.layout-column &gt; .flex-50 {
    max-height: inherit;
}
</code></pre>

<p>doesn't work.</p>

<p>I've provided a <a href="https://plnkr.co/edit/n3r2CBArmzj2cqGeLgeU?p=preview" rel="nofollow">demo</a> of the problem on Plunker.</p>