webkit issue about percentage size inside flexbox

[rinick]

trafficstars

https://code.google.com/p/chromium/issues/detail?id=341310

if flex item's size is modified by stretch, flexgrow, flexshrink, its children won' be able to measure parent's size, so 100% will be 100% of the original parent size (before flexgrow or stretch), not based on the real size

[philipwalton]

Do you know of a workaround?

[rinick]

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>

[rinick]

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

[gregwhitworth]

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

[wI2L]

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

[SimplGy]

@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