diff --git a/demo/index.html b/demo/index.html
index 381da76..91a4444 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -297,6 +297,30 @@ <h4>You can style a paper-dropdown-menu using custom properties</h4>
         </paper-dropdown-menu-light>
       </template>
     </demo-snippet>
+
+
+    <h4>You can set the dropdown to be the same size az the selectbox</h4>
+    <demo-snippet class="centered-demo">
+      <template>
+        <paper-dropdown-menu label="Dinosaurs" vertical-offset="56" full-width-dropdown>
+          <paper-listbox slot="dropdown-content" class="dropdown-content" selected="1">
+            <paper-item>allosaurus</paper-item>
+            <paper-item>brontosaurus</paper-item>
+            <paper-item>carcharodontosaurus</paper-item>
+            <paper-item>diplodocus</paper-item>
+          </paper-listbox>
+        </paper-dropdown-menu>
+
+        <paper-dropdown-menu-light label="Dinosaurs (light)" vertical-offset="56" full-width-dropdown>
+          <paper-listbox slot="dropdown-content" class="dropdown-content" selected="1">
+            <paper-item>allosaurus</paper-item>
+            <paper-item>brontosaurus</paper-item>
+            <paper-item>carcharodontosaurus</paper-item>
+            <paper-item>diplodocus</paper-item>
+          </paper-listbox>
+        </paper-dropdown-menu-light>
+      </template>
+    </demo-snippet>
   </div>
 </body>
 </html>
diff --git a/paper-dropdown-menu-light.js b/paper-dropdown-menu-light.js
index 4221f5a..4439d86 100644
--- a/paper-dropdown-menu-light.js
+++ b/paper-dropdown-menu-light.js
@@ -19,6 +19,7 @@ import './paper-dropdown-menu-shared-styles.js';
 import {IronButtonState} from '@polymer/iron-behaviors/iron-button-state.js';
 import {IronControlState} from '@polymer/iron-behaviors/iron-control-state.js';
 import {IronFormElementBehavior} from '@polymer/iron-form-element-behavior/iron-form-element-behavior.js';
+import {IronResizableBehavior} from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
 import {IronValidatableBehavior} from '@polymer/iron-validatable-behavior/iron-validatable-behavior.js';
 import {PaperRippleBehavior} from '@polymer/paper-behaviors/paper-ripple-behavior.js';
 import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js';
@@ -301,7 +302,8 @@ Polymer({
     IronControlState,
     PaperRippleBehavior,
     IronFormElementBehavior,
-    IronValidatableBehavior
+    IronValidatableBehavior,
+    IronResizableBehavior
   ],
 
   properties: {
@@ -392,7 +394,12 @@ Polymer({
      */
     verticalOffset: Number,
 
-    hasContent: {type: Boolean, readOnly: true}
+    hasContent: {type: Boolean, readOnly: true},
+
+    /**
+     * Whether the dropdown should be the same size az the selectbox.
+     */
+    fullWidthDropdown: {type: Boolean, value: false}
   },
 
   listeners: {'tap': '_onTap'},
@@ -423,6 +430,21 @@ Polymer({
     }
   },
 
+  /**
+   * When the element is ready
+   */
+  ready() {
+    if (this.fullWidthDropdown) {
+      var ironDropdown = this.$.menuButton.root.querySelector('iron-dropdown');
+      this.addEventListener('iron-resize', () => {
+        setTimeout(
+            () => {ironDropdown.style.width =
+                       this.root.host.offsetWidth + 'px'},
+            10);
+      }, this);
+    }
+  },
+
   /**
    * The content element that is contained by the dropdown menu, if any.
    */
diff --git a/paper-dropdown-menu.js b/paper-dropdown-menu.js
index 7d17e97..87bdfe4 100644
--- a/paper-dropdown-menu.js
+++ b/paper-dropdown-menu.js
@@ -21,6 +21,7 @@ import './paper-dropdown-menu-shared-styles.js';
 import {IronButtonState} from '@polymer/iron-behaviors/iron-button-state.js';
 import {IronControlState} from '@polymer/iron-behaviors/iron-control-state.js';
 import {IronFormElementBehavior} from '@polymer/iron-form-element-behavior/iron-form-element-behavior.js';
+import {IronResizableBehavior} from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
 import {IronValidatableBehavior} from '@polymer/iron-validatable-behavior/iron-validatable-behavior.js';
 import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js';
 import {dom} from '@polymer/polymer/lib/legacy/polymer.dom.js';
@@ -110,7 +111,8 @@ Polymer({
     IronButtonState,
     IronControlState,
     IronFormElementBehavior,
-    IronValidatableBehavior
+    IronValidatableBehavior,
+    IronResizableBehavior
   ],
 
   properties: {
@@ -217,6 +219,11 @@ Polymer({
      * Whether focus should be restored to the dropdown when the menu closes.
      */
     restoreFocusOnClose: {type: Boolean, value: true},
+
+    /**
+     * Whether the dropdown should be the same size az the selectbox.
+     */
+    fullWidthDropdown: {type: Boolean, value: false, reflectToAttribute: true}
   },
 
   listeners: {'tap': '_onTap'},
@@ -243,6 +250,21 @@ Polymer({
     }
   },
 
+  /**
+   * When the element is ready
+   */
+  ready() {
+    if (this.fullWidthDropdown) {
+      var ironDropdown = this.$.menuButton.root.querySelector('iron-dropdown');
+      this.addEventListener('iron-resize', () => {
+        setTimeout(
+            () => {ironDropdown.style.width =
+                       this.root.host.offsetWidth + 'px'},
+            10);
+      }, this);
+    }
+  },
+
   /**
    * The content element that is contained by the dropdown menu, if any.
    */