<div flex> inside custom-element not flexing

Question

For Polymer Dart (pre 1.0), I've got a Custom Element, my-page, that has the following HTML:

<div vertical layout>
  <div> ... stuff ... </div>
  <div> ... stuff ... </div>
  <my-panel> ... panel stuff ... </my-panel>
</div>

The element <my-panel> HTML creates a single div as follows:

<div flex>
  <content></content>
</div>

But, my-panel is not "flexing" to the end of my-page. Is there a way to get this working without wrapping my-panel is its own <div flex>?

I guess not. I think this would require to change the Polymer styles (adding ::content or similar). What about just adding the flex attribute to my-panel itself like <my-panel flex>? — Günter Zöchbauer
This does work, but I was hoping to reach down into the my-panel element to continue on the "flexing". I've tried various combinations of ::content, etc, but I haven't found anything that works. I just don't know if it's possible. — gtaylor20
I assume vertical and layout target the Polymer integrated styles. These would probably needed to be extended with ::content to make it work. — Günter Zöchbauer
Have you tried using iron-flex-layout's classes? elements.polymer-project.org/guides/flex-layout — Alan Dávalos

David Notik David Notik · Accepted Answer · 2015-10-16T05:51:14

What you're trying to do doesn't sound like a good practice. Elements should be encapsulated and able to live on their own. Placing a bit of markup and expecting some parent element to complete it seems incorrect in this case.

Also, note that flex only works on direct children of where you set the flexbox, in this case via Polymer's layout attributes.

Lastly, note that Polymer adds extra markup in the Shadow DOM of your elements (at least pre-1.0) and so don't expect your div deep in the shadows of that element to associate with that flexbox you defined.

I'd suggest finding a cleaner way to lay this out. It usually makes sense to have the div surrounding the custom element. If you need it to be conditional, use <template if....

<div flex> inside custom-element not flexing

1 Answers