paper-shadow not expanding to fit div with display: table-cell - polymer

Question

The paper-shadow component is not sizing down to fit a div that has display: table-cell on it. I am not sure if this is a bug or a problem with my usage. I am posting here before I submit an issue on the github page to see if you guys also think this is an issue and not a usage problem.
<div id="in" class="section-container">
<h4>In:</h4>
<button class="in-button" on-click="{{ clearInRow }}">Clear</button>
<button class="in-button" on-click="{{ removeInRow }}">-</button>
<button class="in-button" on-click="{{ addInRow }}">+</button>
<core-list id="in-inputs" data="{{ data.in }}" height="39"
style="overflow: hidden; min-width: 324px;" on-core-activate="{{ itemSelected }}">
<template>
<div class="{{ {selected: selected} | tokenList }}">
<paper-input-no-error value="{{ in[0] }}"
class="in-paper-input"
on-change="{{ inChanged }}"></paper-input-no-error>
<paper-input-no-error value="{{ in[1] }}"
class="in-paper-input"
placeholder="Value"></paper-input-no-error>
</div>
</template>
</core-list>
<paper-shadow z="1"></paper-shadow>
</div>
.section-container {
border-radius: 2px;
overflow: hidden;
display: table-cell;
vertical-align: top;
padding: 10px;
}
.section-container > h4 {
display: inline;
}
Here is a screenshot of what is happening. https://www.dropbox.com/s/jtmeboxdjwyph38/Screenshot%202014-08-19%2009.44.43.png
The paper-shadow is the line across the middle of the screen.
I should also mention that how I am using the paper-shadow worked perfectly fine before I just recently did a bower update on all the components. That seemed to break how I am using it. I do not know what version I was previously running, however, I am now running 0.3.5.

Answer 1

Turns out you must add a position: relative to the parent div in order for the shadow to show up. This will fix the problem.