Flexed element inside a <core-header-panel> that is also flexed

0
votes

Here's the code: http://jsbin.com/dusuda/12/edit

I'm using a core-header-panel element, and from what I've noticed it doesn't render unless it's set to flex. There're 3 elements inside core-header-panel, and what I want to achieve is having the middle element take up all the extra space by having it flexed as well. The ultimate goal here is to have a sticky footer at the bottom.

From sample code I've seen several uses of nested flexes so I thought it would be fine, but for some reason it's not working for me. I tried to flex the div with the yellow background but it's still just adopting the height of its contents.

1
polymer

1 Answers

-1
votes

Core-header-panel has two content insertion points (one for the header and one for the main content).
In your JSbin you added 3 divs (header, main and footer).
Futhermore the header has to be either a core-toolbar or a div with a core-header class and the main content insertion point has position relative.

Check the official docs on layout elements for more infos.

To solve your specific issue, I reduced the 3 divs to only 2 and used the fit attribute for the main + footer content.

See my JSBin: http://jsbin.com/fawof/1/edit?html,output