<!--
Makes all its children as wide/tall as the widest/tallest children.
-->

<link rel="import" href="../basic-element/basic-element.html">
<link rel="import" href="../basic-stack/basic-stack.html">

<polymer-element name="basic-spread" extends="basic-element" noscript>
<template>
  <style>
  :host {
    display: block;
    /*overflow: hidden;*/
    position: relative;
  }

  ::content > :nth-child(2) { transform: translateX(100%); }
  ::content > :nth-child(3) { transform: translateX(200%); }
  </style>
  <basic-stack>
    <content></content>
  </basic-stack>
</template>
</polymer-element>

<!--
Makes all its children as wide/tall as the widest/tallest children.
-->

<link rel="import" href="../basic-element/basic-element.html">
<link rel="import" href="../basic-stack/basic-stack.html">

<polymer-element name="basic-spread" extends="basic-element">
<template>
  <style>
  :host {
    display: block;
    /*overflow: hidden;*/
    position: relative;
  }

  ::content > :nth-child(2) { left: 100%; }
  ::content > :nth-child(3) { left: 200%; }
  </style>
  <basic-stack id="spreadStack">
    <content></content>
  </basic-stack>
</template>
<script>
Polymer({

  recalc: function() {
    this.$.spreadStack.recalc();
  }
  
});
</script>
</polymer-element>

Add explicit script, which seems to force change in when attached handler of subelement basic-stack gets invoked. Route recalc requests to basic-stack.
Add explicit script, which seems to force change in when attached handler of subelement basic-stack gets invoked.
Route recalc requests to basic-stack.
