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
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