webkit issue about percentage size inside flexbox about flexbugs HOT 6 OPEN

Do you know of a workaround?

from flexbugs.

this has bug: child_div's size could be measured incorrectly 
<div class='flex_layout'>
  <div class='div_with_flexgrow_or_stretch'>
    <div class="child_div"  style="width:50%;height:50%" />
  </div>
</div>

work around, this seems to work
<div class='flex_layout'>
  <div class='div_with_flexgrow_or_stretch'>
    <div style='position:absolute;left:0;right:0;top:0;bottom:0'>
       <div class="child_div"  style="width:50%;height:50%" />
    </div>
  </div>
</div>

from flexbugs.

test case
bug: http://jsfiddle.net/bj94y/2/
work around http://jsfiddle.net/bj94y/4/

from flexbugs.

I think this works at this point, but I don't think this will work once Chrome updates to the new part of the spec regarding absolute positioned children. I will test this on Monday since IE has already made this change and update this if it works or not. Here is the test case I will use to verify: http://jsbin.com/fowaxisupo/1/edit

from flexbugs.

Had to use your solution @rinick Thank you for the tip!
I will follow the issue for updated about this.

from flexbugs.

@gregwhitworth It's a good note and made me nervous, but rinick's workaround still fixes the problem, so long as my flex sized container is position: relative -- this follows the same rule as always about position: absolute only positioning against the nearest ancestor with non-static position.

<div class='flex_layout'>
  <div class='div_with_flexgrow_or_stretch' style='position: relative'>
    <div style='position:absolute;left:0;right:0;top:0;bottom:0'>
       <div class="child_div"  style="width:50%;height:50%" />
    </div>
  </div>
</div>

I'm wondering though if this will keep working or fail to work after Chrome updates. There are lots of "clarifications" to the spec around absolute positioning but I can't parse the intent. What's the static position of an absolutely positioned child element? https://drafts.csswg.org/css-flexbox/#change-201403-clarify

from flexbugs.