"Break-Inside: Avoid-Column" Doesn't Work in Firefox

Page-break-inside not working in firefox

MDN says that Firefox 19 is the earliest version to support the page-break-inside property. Looks like you're out of luck.

https://developer.mozilla.org/en-US/docs/CSS/page-break-inside

Maybe you can find something useful from this question: alternative to page-break-inside:avoid because of compatibility issues

Is there a solution for CSS column breaks that works in both Firefox and Chrome

You could use flexbox to keep the children of .three_col in a single row like this:

.three_col {  display: flex;}.keep_together {  margin: 20px;  flex: 1;}

<div class="three_col"><div class="keep_together"><h2 style="color: #02b4f0;">Location 1</h2><p>10 Something Street <br>Somewhere 999<br>tel: 03 9999 9997<br>fax: 03 9999 9998</p><p>Email:</p><p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p></div><div class="keep_together"><h2 style="color: #62bb47;">Location 2</h2><p>10 Something Street <br>Somewhere 999<br>tel: 03 9999 9997<br>fax: 03 9999 9998</p><p>Email:</p><p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr </p></div><div class="keep_together"><h2 style="color: #ef3781;">Location 3</h2><p>10 Something Street <br>Somewhere 999<br>tel: 03 9999 9997<br>fax: 03 9999 9998</p><p>Email:</p><p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p></div></div>

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

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
to auto or scroll and any elements with overflow: hidden and a
non-auto logical height (and no specified maximum logical
height).

Since line boxes contain no possible break points, inline-block
and inline-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>

How to prevent column break within an element?

The correct way to do this is with the break-inside CSS property:

.x li {
    break-inside: avoid-column;
}

Unfortunately, as of October 2021, this is still not supported in Firefox but it is supported by every other major browser. With Chrome, I was able to use the above code, but I couldn't make anything work for Firefox (See Bug 549114).

The workaround you can do for Firefox if necessary is to wrap your non-breaking content in a table but that is a really, really terrible solution if you can avoid it.

UPDATE

According to the bug report mentioned above, Firefox 20+ supports page-break-inside: avoid as a mechanism for avoiding column breaks inside an element but the below code snippet demonstrates it still not working with lists:

.x {
    column-count: 3;
    width: 30em;
}

.x ul {
    margin: 0;
}

.x li {
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside:avoid;
    -moz-page-break-inside:avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;
}

<div class='x'>
    <ul>
        <li>Number one, one, one, one, one</li>
        <li>Number two, two, two, two, two, two, two, two, two, two, two, two</li>
        <li>Number three</li>
    </ul>
</div>

Column-Count Property is not working on Firefox

I had to work on something similar a few years ago, and for what I remember, the cross-browser support wasn't bullet-proof (especially with older browsers) but this should work fairly well.

https://codepen.io/patriziosotgiu/pen/jGporg?editors=1100

Put the column-break in a container outside of the ul tag.
Also, in case you have to work on more complex layouts, a bunch of extra break properties may be helpful (See li).

Tested with latest Firefox, Chrome, Safari on Mac.

Note: Using flexbox would probably give you a better result, and a more up to date solution. It is worth trying it if your project can use flexbox.