md-tabs height eaten up by Chrome

[jozsi]

Hello,

Look at the following illustration in Chrome (I am running version 43): http://codepen.io/anon/pen/xGReeO

As the md-content height below grows, it eats up the space from md-tabs, until it visually disappears.

Works in Safari, and Firefox (partially - the overflow is added to body level instead of md-content level, however this might be a Getting Started Demo app bug).

Might be related to #2469

Any ideas?

[Koslun]

Seeing the same issue on both my own app and in the codepen in Chrome v 43 on Windows 7 and OS X.

Not seeing the problem in IE 11 and Firefox v37 and v38 or Opera.

I think it might be related to putting layout in the body tag. Encapsulating all the code inside the body tag in a div and moving the layout="column" attribute there seemed to have at least stopped the eating up space bug.

Here's a fork of the codepen with mentioned changes: http://codepen.io/anon/pen/MwbdZb

Should be noted that the height for the sidenav doesn't fill up the height in this case So would need further tweaks to get the same look as the earlier example.

[Koslun]

Adding a simple layout-fill to the encapsulating div fixes the height not stretching. See update in codepen here.

Lesson learned: Don't put layout attributes in the body tag.
Cause: Either it messes with the body CSS in place or the appropriate CSS isn't being applied to the body tag.

As it applies to the body tag it might be related to #681

[jozsi]

@Koslun - Unfortunately, the scrollbar/overflow is now page level (not content level), for which the bug does not appear, however, the toolbar doesn't stick either.

[Koslun]

@jozsi You're right, toolbar doesn't stick and scrollbar is now for the entire page.

This looks like a pretty critical bug unless we're doing something very wrong.

[jozsi]

A not optimal workaround for this issue is to add min-height: 48px; to md-tabs.

cc @Koslun

[robertmesserle]

The best solution here is to add flex-shrink: 0 to md-tabs - I will be adding this to our source code now.