Flexbox resizing

I'm trying to come up with an effective way of defining a nested flexbox and allow it to be resized. I think it's almost there:

http://ift.tt/1ARduQP

I'm using three custom elements purely to make the mark-up more declarative:

flex, flex-item, flex-resizer

A flex represents the container. A flex-item presents an element within the container, and flex-resizer represents a resizer widget which can be placed between two flex-items to add resizing functionality between them.

This all appears to work really well. However, it only handles items sized with flex-grow. If flex-shrink or flex-basis is defined, then the calculations simply don't work.

Can anyone suggest a way to amend this to allow it work for all cases? I realise that there is some ambiguity in regards to how the space should be shared between items with various flex configurations, but any input would be welcome.

Any alternative approaches would be welcome also. Thanks.