How to get flex columns to wrap around a positioned element?

I have a container that contains a list with an arbitrary number of items each with arbitrary heights. I want the items to wrap column-wise, which is simple enough using flexbox.

ul {  display: flex;  flex-flow: column wrap;  height:300px;}li {  list-style-type:none;}

But I also want an element positioned in the top-right of the container, which the flex columns should wrap around. So it looks something like this, the yellow are the list items and the blue is the fixed element:

How can I accomplish this?

https://jsfiddle.net/d25uqtpx/