Hi, I believe you have suffered some fairly common confusion between 'sizing content to fit a container' and 'sizing a container to fit content'. The browser normally tries to make things as big as their content (at least, vertically).
When you use something like flex layout (or overflow: scroll, for that matter) you are asking for the opposite behavior, and you have to make sure the container has a size so the layout knows how much room to use. Otherwise, the browser gets confused and all sizes go to 0. This problem affected you in at least two places. `s-app` itself has no sizing information (so it's sizes are 0), and neither did the `polymer-flex-layout` (until you added the 100vh). Here is a slightly different version: http://jsbin.com/uXUSUDU/3/edit In this version,I used these concepts: (1) use polymer-flex-layout without `isContainer` If `polymer-flex-layout` is a container, you have to size it too. If you let it use the element as container, then we only have to make sure the element itself has size. (2) make sure `s-app` has size There are several ways to do this, but none of them are zero-configuration. In my example, I first made sure `s-app` has 'display: block' (so it's more like a DIV than a SPAN), and then I used position: relative and height: 100% to size both body and s-app to fill the viewport. An alternative is to give `s-app` height: 100vh, then you don't need the position: relative or height: 100% styles on body/html. I didn't show this version because 'vh' is (very slightly) less supported than `%`. I hope this helps. Please follow up if you have any questions. Scott P.S. They way you used #page in the main document to style an element inside of ShadowDOM won't work under native ShadowDOM. It works under the ShadowDOM polyfill only because it's extremely difficult for the polyfill to enforce style scoping. On Tue, Jan 14, 2014 at 3:55 PM, <[email protected]> wrote: > Here is the whole thing, which looks pretty nice with minimal styling: > > https://gist.github.com/konsumer/8428281 > > > <https://lh3.googleusercontent.com/-lPzzyxX6s2s/UtXOWNjRGOI/AAAAAAAAB8s/FFiPSp1FVUs/s1600/screen.png> > > Follow Polymer on Google+: plus.google.com/107187849809354688692 > --- > You received this message because you are subscribed to the Google Groups > "Polymer" group. > To unsubscribe from this group and stop receiving emails from it, send an > email to [email protected]. > For more options, visit https://groups.google.com/groups/opt_out. > Follow Polymer on Google+: plus.google.com/107187849809354688692 --- You received this message because you are subscribed to the Google Groups "Polymer" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. For more options, visit https://groups.google.com/groups/opt_out.
