Handling of min-height/width with flex-basis: 0% is inconsistent

[akrawitz]

Refer to http://codepen.io/anon/pen/xZPobW

I have a 200px by 200px flexbox in a column with two items that both have flex: 1 1 0%. The second item also has min-height: 100px. In Chrome/Firefox/Safari/Opera, the min-height is not considered when calculating the flex allocation (so the two items are both 100px tall), whereas, in IE 11, the min-height is subtracted out and only the difference is used in the flex allocation (so item 1 is 50px tall and item 2 is 150px tall). See Example 1 in the Pen.

The same thing happens with a row and min-width. See Example 2 in the Pen.

[philipwalton]

Hmmm, yeah, it looks like IE11 treats the min size declaration as the items initial starting size and calculates free space after that.

Have you discovered a workaround?

[JacobDB]

I'm seeing something very similar, I haven't been able to figure out any workaround. Can this be added to the flexbug list, or do we need to discover a workaround before that can be done?

https://codepen.io/JacobDB/pen/BmbOao

[philipwalton]

@JacobDB I don't add bugs to the list unless there's a workaround. Otherwise the list would just be a bug aggregate, and I want it to be a solutions list instead.