title: Using CSS Columns 'page-break-inside' doesn't work with Flexbox 'align-items:center'
body: <p>This is only an issue in Mozilla Firefox (tested with latest).</p>
  
  <p>I want a to layout menu items with vertically centered text in four columns.</p>
  
  <p>I would have gone down the <code>'display: table'</code> <code>'vertical-align:middle'</code> route but that would prevent me from applying truncatation when required and I would prefer not to add an addiotnal wrapper element if possible.</p>
  
  <p>I'm using the following CSS to achieve vertical centering within the menu item which forces a column break in between a menu item:</p>
  
  <pre><code>display: flex;
  
  align-items: center;
  // or 
  flex-direction: column;
  justify-content: center;
  </code></pre>
  
  <p>See Codepen (enabling line 20 or lies 24-25) breaks the layout...</p>
  
  <p><a href="http://codepen.io/achisholm/pen/JXzGwE" rel="nofollow">http://codepen.io/achisholm/pen/JXzGwE</a></p>
  
  <p><strong>Edit</strong></p>
  
  <p>So, I can achieve the desired layout with a vertical centering 'hack' but I'd prefer to use Flexbox if at all possible.</p>
  
  <p><a href="http://codepen.io/achisholm/pen/mPoPPz?editors=1100" rel="nofollow">http://codepen.io/achisholm/pen/mPoPPz?editors=1100</a></p>
  
  <p>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.</p>