CSS; height as inherit leads to layout issues (Chrome / IE11) #4397
Description
Ever since the recent commit of code a few days ago that caused height : inherit to be bound to the .layout class, I've been struggling with layout issues. For instance, the following simple layout causes unnecessary scrolling in Chrome and IE11:
<body>
<md-toolbar>
</md-toolbar>
<div layout="row">
</div>
</body>See this CodePen: Example
If I use F12 tools, and disable the height : inherit, all returns to normal as expected.
I'm not sure if this is as expected/designed and I'm just not designing properly, or if this is an unintended consequence. For instance, I understand in the example above that the div will inherit the height of the body, which the MD CSS gives a 100% height and min-height. So, in this case, this causes an unnecessary scrolling since the height of the md-toolbar is not being subtracted from the page height, and the div therefore runs longer than the viewport by that much. I can use more involved flex layouts and designs to account for this, but that leads to other issues.
One such issue is when I use md-icon. I've seen cases where an md-icon that is nested into some combinations of layout="row" or layout="column" loses the height of 24px set in the MD CSS because the .layout inherit style overrides it.