JSFiddle - React, Tailwind, and code Playground
HTML
<base href="https://polygit.org/*+:master/paper-dropdown-menu+:fix-light-flex/components/">
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="paper-dropdown-menu/paper-dropdown-menu-light.html">
<link rel="import" href="paper-item/paper-item.html">
<link rel="import" href="paper-menu/paper-menu.html">
<style is="custom-style">
paper-dropdown-menu,
paper-dropdown-menu-light {
--paper-font-subhead: {
font-size: 40px;
font-family: monospace;
}
}
</style>
<div>
<div class="row">
<div>
pdm
</div>
<paper-dropdown-menu no-label-float>
<paper-menu class="dropdown-content" selected="0">
<paper-item>Foo</paper-item>
<paper-item>Bar</paper-item>
</paper-menu>
</paper-dropdown-menu>
</div>
<div class="row">
<div>
pdm light patched
</div>
<paper-dropdown-menu-light no-label-float>
<paper-menu class="dropdown-content" selected="0">
<paper-item>Foo</paper-item>
<paper-item>Bar</paper-item>
</paper-menu>
</paper-dropdown-menu-light>
</div>
<div class="row second">
<div>
pdm (flex)
</div>
<paper-dropdown-menu no-label-float>
<paper-menu class="dropdown-content" selected="0">
<paper-item>Foo</paper-item>
<paper-item>Bar</paper-item>
</paper-menu>
</paper-dropdown-menu>
</div>
<div class="row second">
<div>
pdm-light patched (flex)
</div>
<paper-dropdown-menu-light no-label-float>
<paper-menu class="dropdown-content" selected="0">
<paper-item>Foo</paper-item>
<paper-item>Bar</paper-item>
</paper-menu>
</paper-dropdown-menu-light>
</div>
</div>
CSS
body {
min-width: 800px;
}
body > div {
display: flex;
flex-direction: column;
}
div.row {
display: flex;
flex-direction: row;
}
div.row :first-child {
flex-shrink: 0;
flex-basis: 300px;
}
div.row.second :last-child {
flex: 1;
}
JavaScript
Polymer({
is: 'x-foo',
properties: {},
ready: function() {},
});