Percentage widths in nested flexbox adds unexpected space

Question

I noticed a weird bug in all the major browsers when you use a percentage width on an element in a nested flexbox with its glTexStorage3D(GL_TEXTURE_2D_ARRAY, 1, // Number of mipmaps eInternalFormat, // Internal format uiWidth, uiHeight, // width, height static_cast<uint32>(vPixelData.size())); property set to "flex-end". It renders the parent element as if the child were set to 100% width regardless of the percentage actually used by the child.

I have created a Fiddle to demonstrate the issue: https://jsfiddle.net/u21pe916/

HTML

justify-content

CSS

<div class="wrapper">
  <div class="flex-col-1">Column 1</div>

  <div class="flex-col-2">
    <div class="nested-col-1" id="percent-width">Nested Column 1</div>
    <div class="nested-col-2">Nested Column 2</div>
  </div>
</div>

<div class="wrapper">
  <div class="flex-col-1">Column 1</div>

  <div class="flex-col-2">
    <div class="nested-col-1" id="unit-width">Nested Column 1</div>
    <div class="nested-col-2">Nested Column 2</div>
  </div>
</div>

Screenshot

Is there a fix/work-around so that percentage values can be used without creating the extra space?