Using CSS Columns 'page-break-inside' doesn't work with Flexbox 'align-items:center'

This is only an issue in Mozilla Firefox (tested with latest).

I want a to layout menu items with vertically centered text in four columns.

I would have gone down the 'display: table''vertical-align:middle' route but that would prevent me from applying truncatation when required and I would prefer not to add an addiotnal wrapper element if possible.

I'm using the following CSS to achieve vertical centering within the menu item which forces a column break in between a menu item:

display: flex;align-items: center;// or flex-direction: column;justify-content: center;

See Codepen (enabling line 20 or lies 24-25) breaks the layout...

http://codepen.io/achisholm/pen/JXzGwE

Edit

So, I can achieve the desired layout with a vertical centering 'hack' but I'd prefer to use Flexbox if at all possible.

http://codepen.io/achisholm/pen/mPoPPz?editors=1100

I'm ready to put it down to a bug as all other modern browsers display as you'd expect. although I'm curious to know why it's happening and if it's occuring for a specific reason.