app-header-layout and min-height for flex items

[nicolasr75]

Description

I have a fullbleed app-header-layout which contains a tool bar and a body with flexible divs. The flexbox specification says that a flex item cannot be smaller than the size of its content along the main axis. To make flexible items work with 'overflow: scroll' one has to override min-height (for flexible column layouts) and set it to 0 instead of the default auto value. A thorough explanation can be found here:
https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size

The explanation there also talks about differences between f.e. Chrome and Firefox. For Firefox it may be necessary to set min-height: 0 also for ancestor flexible items. This is where app-header-layout comes into play.

If I set min-height: 0 in my content flex items the overflow:scroll works in Chrome but not in Firefox. The problem is the contentContainer in app-header-layout. If I use the developper tools in Firefox and add min-height:0 to the contentContainer during debugging, my layout works.

Is it somehow possible to make this work without having to change the source of app-header-layout myself (after every update of the Polymer sources)?

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

[nicolasr75]

I guess this is related to #486