How to overlay polymer flex div

Question

I'm using polymer-shadow styles to use flex divs. I've follow these answers on How to overlay div. But, as soon as I set a 'flexed' div with absolute position, everything is chaos.

I did a plunkr where you can reproduce it.

My code looks like:

<div class="layout horizontal">
    <div class="flex" style="background-color:red"></div>
    <div class="flex-5">
      <div class="flexContainer">
        <!--Following two divs should be overlayed-->
        <div style="background-color:papayawhip">---------------</div>
        <div class="content">Data</div>
      </div>
    </div>
  </div>

If I use position relative/absolute out of shadow-dom flex classes, it works properly:

  <div>
    <div style="background-color:papayawhip; position:absolute">---------------</div>
    <div class="content" style="position:absolute">Data</div>
  </div>

So, how can I overlay one div above another, when both are inside a flex container?

Answer 1

You just need to make your flex-5 div relative and the two inner divs fit.

<div class="flex-5 relative">
    <div class="fit" style="background-color:papayawhip">---------------</div>
    <div class="fit">Data</div>
  </div>
</div>

Please see this updated plunkr.

Note that in Polymer, <div class="relative"></div> is the same as

div {
    position: relative;
}

<div class="fit"></div> is the same as

div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}