[Vuejs]-Position computed item below element of flexbox

For people who might have a similar issue here’s another approach I came up with while trying to adapt James solution.

See this jfiddle: jsfiddle using overflow and min-width

What I changed about my first solution:
The issue with the shrinkage is some chicken-and-egg issue: The flexbox cannot shrink further than the elements inside allow for shrinkage, but then my computed element only shrinks if another element shrinks which in turn is prevented by the flexbox itself being unable to shrink, which brings us back to the beginning.

So in my question I tried to make the flexbox ignore the element by positioning it absolutely – which messes up the overall layout.

A solution I came up with in order to allow shrinkage: Make some of the elements be able to overflow the flexbox and allow for a min-width different to auto.

This way I allow the calculated element to overflow the flexbox (which makes the flexbox kinda ignore the item). Note that you also want to adjust the min-width of certain elements.

So in the end I introduced a second flexbox which encapsulates the computed element. Both this element as well as the items inside allow both for overflow and shrinkage. (One might be able to simplify the elements a little).

The computed element can thus breach/overflow its boundaries and the overall construct can shrink. The shrinkage causes the computed element to resize right away – so temporary overflow gets fixed immediately.

You can compare this approach to James idea and decide which one suits your troubles better.