0

Mozilla Firefox v113.0 documentation says it supports column views and the break-before CSS property completely. But when I set break-before: avoid-column OR break-before: column it does not identify the property. The need is to set fixed position of multiple div elements once the page has loaded. My solution is working on every browser but Mozilla.

I use JS to set class .first-item and .last-item to the div to fix their position.

PS. All div elements are dynamically generated. PPS. I do not want to use break-inside

.main {
    column-count: 2;
    column-width: 36rem;
    margin-bottom: 1.5rem;

    .item-wapper {
         break-inside: avoid-column;

         &.first-item {
             break-before: column;
         }

         &.last-item {
             &:not(.first-item) {
                 break-before: avoid-column;
             }
         }
    }
}

I also tried using page-break-before but to no avail.

1infinite
  • 23
  • 4

0 Answers0