"break-inside: avoid-column" doesn't work in Firefox

Question

I'm creating columns in my footer. It works well for Chrome and IE using:

column-count: 4;
break-inside: avoid-column;

I'm getting troubles with Firefox, where the property is crossed out:

What can I do?

Using page-break-inside: avoid, I get something like this. Some items move over his position, like "Item 9".

How it looks in Chrome:

For example:

#columnasFooter{
  column-count: 3;
}
#columnasFooter li{
  break-inside: avoid-column;
  page-break-inside: avoid;
}

<ul id="columnasFooter">
    <li>Title column 1
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
            <li>Item 7</li>
            <li>Item 8</li>
        </ul>
    </li>
    <li>Title column 2
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
            <li>Item 7</li>
            <li>Item 8</li>
            <li>Item 9</li>
        </ul>
    </li>
    <li>Title column 3
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
        </ul>
    </li>
</ul>

Johns

Answer 1

I tried bugfix with page-break-inside: avoid, but for me it didn't work fine with only this property and value on Firefox.

Then I used the following solution and, in my case, work well for Firefox, Chrome and Edge:

#columnasFooter {
  column-count: 3;
}

#columnasFooter li {
  /* for Chrome and Edge */
  break-inside: avoid-column;
  /* for Firefox */
  display: inline-grid;
  page-break-inside: avoid;
}

/* for Chrome and Edge */
@supports (break-inside: avoid-column) {
  #columnasFooter li  {
    display: block;
  }
}

As you can see, I used @supports rule to bugfix. Maybe, it could be useful to someone

Mazy

Answer 2

Works properly in Firefox with overflow: hidden but this doesn't work in Chrome. So we should use @support query to control overflowing. The below code works fine in Chrome and Firefox.

#columnasFooter {
  column-count: 3;
}

#columnasFooter li {
  break-inside: avoid-column;
  page-break-inside: avoid;
  overflow: hidden; /* fix for firefox */
}

@supports (break-inside: avoid-column) {
  #columnasFooter li {
    overflow: visible; /* for chrome */
  }
}

<ul id="columnasFooter">
  <li>Title column 1
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
      <li>Item 7</li>
      <li>Item 8</li>
    </ul>
  </li>
  <li>Title column 2
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
      <li>Item 7</li>
      <li>Item 8</li>
      <li>Item 9</li>
    </ul>
  </li>
  <li>Title column 3
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ul>
  </li>
</ul>

Boughten

Answer 3

Fire fox does not have support to break-inside see here: https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside

SO
Use page-break-inside: for firefox:

column-count: 4;
break-inside: avoid-column;
page-break-inside:avoid;

See here about page-break-inside:avoid; :
https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-inside

Seguidilla

Using page-break-inside, in Firefox, It shows me four columns, but some items that they are in 'li' item, are moved into another column. I attached a picture in the OP. – Johns

attach image how it looks in chrome please – Negrito

Answer 4

Just applying overflow: hidden on the li alongside breakInside: "avoid", fixed the issue for me on Firefox and it continued to work on Chrome

Lida

Answer 5

With the release of Firefox version 92.0, the avoid-column value works for break-inside (Firefox added support for avoid-page as well):

#columnasFooter{
    column-count: 3;
}
#columnasFooter li{
    break-inside: avoid-column;
}

<ul id="columnasFooter">
    <li>Title column 1
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
            <li>Item 7</li>
            <li>Item 8</li>
        </ul>
    </li>
    <li>Title column 2
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
            <li>Item 7</li>
            <li>Item 8</li>
            <li>Item 9</li>
        </ul>
    </li>
    <li>Title column 3
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
        </ul>
    </li>
</ul>

Jesus

There must have been a regression as Item 9 is appearing in the 3rd column for me as of Firefox 101.0.1 – Avina

@Avina Shows up in column 2 for me in Firefox 118; don't think I ever checked v101, so if it was a regression, it was fixed. – Jesus

Answer 6

try this i think its work

page-break-inside: avoid;

Arnuad

Doesn't work correctly. Now I get some items move over his position. – Johns