paper-dropdown doesn't update it's scroller div

[arthurevans]

Moved from Polymer/old-docs-site#895, reported by @AminElnaggar:

I have this snippit

<paper-menu-button class="ticketMenu">
  <paper-icon-button icon="more-vert" noink></paper-icon-button>
  <paper-dropdown class="dropdown no-padding" halign="right">
    <div class="menu">
      <paper-item on-tap="{{toggleSelectThisTicket}}">Info</paper-item>

      <template if="{{!ticket.assignee}}">
        <paper-item on-tap="{{assignThisTicket}}">Assign</paper-item>
      </template>

      <template if="{{ticket.status == 'started'}}">
        <paper-item on-tap="{{resolveThisTicket}}">Resolve</paper-item>
      </template>
    </div>
  </paper-dropdown>
</paper-menu-button>

If any of the two if statements were true at initialization, and then later on were false thereby removing the web-component inside it actually removes it from DOM which is good, but the problem is that inside paper-dropdown's shadow there is a div with class scroller that seems to hardcode it's style based on it's content at initialization.

How do I force it to recalculate height?

just for a visual, before and after: