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.
According to 4. Rules for Breaking:
Some content is not fragmentable, for example many types of replaced elements (such as images or video), scrollable elements, or a single line of text content. Such content is considered monolithic: it contains no possible break points. Any forced breaks within such boxes therefore cannot split the box, and must therefore also be ignored by the box’s own fragmentation context.
In addition to any content which is not generally fragmentable, UAs may consider as monolithic any elements with
overflow
set toauto
orscroll
and any elements withoverflow: hidden
and a non-auto
logical height (and no specified maximum logical height).Since line boxes contain no possible break points,
inline-block
andinline-table
boxes (and other inline-level display types that establish a new formatting context) may also be considered monolithic.
So you may use
.menu-item {
overflow: hidden;
}
html, body {
height: 100%;
}
* {
box-sizing: border-box;
}
nav {
height: 100%;
-webkit-columns: 4;
-moz-columns: 4;
columns: 4;
}
.menu-item {
padding: 0 20px;
height: 8.333%;
border: 1px solid gainsboro;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
overflow: hidden;
}
<nav>
<a class="menu-item"><p>Menu item 1</p></a>
<a class="menu-item"><p>Menu item 2</p></a>
<a class="menu-item"><p>Menu item 3</p></a>
<a class="menu-item"><p>Menu item 4</p></a>
<a class="menu-item"><p>Menu item 5</p></a>
<a class="menu-item"><p>Menu item 6</p></a>
<a class="menu-item"><p>Menu item 7</p></a>
<a class="menu-item"><p>Menu item 8</p></a>
<a class="menu-item"><p>Menu item 9</p></a>
<a class="menu-item"><p>Menu item 10</p></a>
<a class="menu-item"><p>Menu item 11</p></a>
<a class="menu-item"><p>Menu item 12</p></a>
<a class="menu-item"><p>Menu item 13</p></a>
<a class="menu-item"><p>Menu item 14</p></a>
<a class="menu-item"><p>Menu item 15</p></a>
<a class="menu-item"><p>Menu item 16</p></a>
<a class="menu-item"><p>Menu item 17</p></a>
<a class="menu-item"><p>Menu item 18</p></a>
<a class="menu-item"><p>Menu item 19</p></a>
<a class="menu-item"><p>Menu item 20</p></a>
<a class="menu-item"><p>Menu item 21</p></a>
<a class="menu-item"><p>Menu item 22</p></a>
<a class="menu-item"><p>Menu item 23</p></a>
<a class="menu-item"><p>Menu item 24</p></a>
<a class="menu-item"><p>Menu item 25</p></a>
<a class="menu-item"><p>Menu item 26</p></a>
<a class="menu-item"><p>Menu item 27</p></a>
<a class="menu-item"><p>Menu item 28</p></a>
<a class="menu-item"><p>Menu item 29</p></a>
<a class="menu-item"><p>Menu item 30</p></a>
<a class="menu-item"><p>Menu item 31</p></a>
<a class="menu-item"><p>Menu item 32</p></a>
<a class="menu-item"><p>Menu item 33</p></a>
<a class="menu-item"><p>Menu item 34</p></a>
<a class="menu-item"><p>Menu item 35</p></a>
<a class="menu-item"><p>Menu item 36</p></a>
<a class="menu-item"><p>Menu item 37</p></a>
<a class="menu-item"><p>Menu item 38</p></a>
<a class="menu-item"><p>Menu item 39</p></a>
<a class="menu-item"><p>Menu item 40</p></a>
<a class="menu-item"><p>Menu item 41</p></a>
<a class="menu-item"><p>Menu item 42</p></a>
<a class="menu-item"><p>Menu item 43</p></a>
<a class="menu-item"><p>Menu item 44</p></a>
<a class="menu-item"><p>Menu item 45</p></a>
<a class="menu-item"><p>Menu item 46</p></a>
<a class="menu-item"><p>Menu item 47</p></a>
</nav>
Or, as GCyrillus commented,
.menu-item {
display: inline-flex;
width: 100%;
}
html, body {
height: 100%;
}
* {
box-sizing: border-box;
}
nav {
height: 100%;
-webkit-columns: 4;
-moz-columns: 4;
columns: 4;
}
.menu-item {
padding: 0 20px;
height: 8.333%;
border: 1px solid gainsboro;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
width: 100%;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
<nav>
<a class="menu-item"><p>Menu item 1</p></a>
<a class="menu-item"><p>Menu item 2</p></a>
<a class="menu-item"><p>Menu item 3</p></a>
<a class="menu-item"><p>Menu item 4</p></a>
<a class="menu-item"><p>Menu item 5</p></a>
<a class="menu-item"><p>Menu item 6</p></a>
<a class="menu-item"><p>Menu item 7</p></a>
<a class="menu-item"><p>Menu item 8</p></a>
<a class="menu-item"><p>Menu item 9</p></a>
<a class="menu-item"><p>Menu item 10</p></a>
<a class="menu-item"><p>Menu item 11</p></a>
<a class="menu-item"><p>Menu item 12</p></a>
<a class="menu-item"><p>Menu item 13</p></a>
<a class="menu-item"><p>Menu item 14</p></a>
<a class="menu-item"><p>Menu item 15</p></a>
<a class="menu-item"><p>Menu item 16</p></a>
<a class="menu-item"><p>Menu item 17</p></a>
<a class="menu-item"><p>Menu item 18</p></a>
<a class="menu-item"><p>Menu item 19</p></a>
<a class="menu-item"><p>Menu item 20</p></a>
<a class="menu-item"><p>Menu item 21</p></a>
<a class="menu-item"><p>Menu item 22</p></a>
<a class="menu-item"><p>Menu item 23</p></a>
<a class="menu-item"><p>Menu item 24</p></a>
<a class="menu-item"><p>Menu item 25</p></a>
<a class="menu-item"><p>Menu item 26</p></a>
<a class="menu-item"><p>Menu item 27</p></a>
<a class="menu-item"><p>Menu item 28</p></a>
<a class="menu-item"><p>Menu item 29</p></a>
<a class="menu-item"><p>Menu item 30</p></a>
<a class="menu-item"><p>Menu item 31</p></a>
<a class="menu-item"><p>Menu item 32</p></a>
<a class="menu-item"><p>Menu item 33</p></a>
<a class="menu-item"><p>Menu item 34</p></a>
<a class="menu-item"><p>Menu item 35</p></a>
<a class="menu-item"><p>Menu item 36</p></a>
<a class="menu-item"><p>Menu item 37</p></a>
<a class="menu-item"><p>Menu item 38</p></a>
<a class="menu-item"><p>Menu item 39</p></a>
<a class="menu-item"><p>Menu item 40</p></a>
<a class="menu-item"><p>Menu item 41</p></a>
<a class="menu-item"><p>Menu item 42</p></a>
<a class="menu-item"><p>Menu item 43</p></a>
<a class="menu-item"><p>Menu item 44</p></a>
<a class="menu-item"><p>Menu item 45</p></a>
<a class="menu-item"><p>Menu item 46</p></a>
<a class="menu-item"><p>Menu item 47</p></a>
</nav>