Custom element height 0px inside a template

Question

I have created a custom element,

When I put it inside a template, its height will be 0px, while it's not if I put it outside the template ...

<link href="//www.polymer-project.org/0.5/components/polymer/polymer.html" rel="import">
<link href="//www.polymer-project.org/0.5/components/paper-input/paper-input-decorator.html" rel="import">

<polymer-element name="dalilak-date-picker" attributes="selectedDate">
  <template>
    <style>
      :host {
        display: block;
        
      }
    </style>
    <paper-input-decorator
      label="date picker"
      floatingLabel
      error="Please enter the date in the following format dd/mm/yyyy "
      isInvalid="{{isInvalid}}"
      >
      <input is="core-input" value="{{inputValue}}" on-input="{{inputChanged}}">
    </paper-input-decorator>
  </template>
  <script>
    Polymer('dalilak-date-picker', {
      // source: http://stackoverflow.com/a/15504877/2407522
      datePattern: /^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[1,3-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$/gm,
      inputChanged: function() {
        if (this.validateDate()) {
          this.selectedDate = this.inputValue;
          return;
        }
        this.selectedDate = null;
      },
      validateDate: function() {
        this.isInvalid = !this.inputValue.match(this.datePattern);
        return !this.isInvalid;
      }
    });
  </script>
</polymer-element>
  <template is="auto-binding">
   <div vertical layout>
    <dalilak-date-picker flex selectedDate="{{selectedDate}}"></dalilak-date-picker>

      <div>
        selected date is: {{selectedDate}}
      </div>
   </div>

  </template>