0

I have got list that needs to be separated to 3 columns (https://codepen.io/kyrbi/pen/poyeyQP), here is the html code:

<div id="tree">
    <div class="tree-all-expanded">
        <div class="tree-all-expanded-detail">
            <div>
                <div>
                    <h4><a href="">List</a></h4>
                    <ul>
                        <li><a href="">Item</a></li>
                        <li><a href="">Item</a></li>
                        <li><a href="">Item</a></li>
                        <li><a href="">Item</a>
                        </li>
                    </ul>
                </div>
                <div>
                    <h4><a href="">List</a></h4>
                    <ul>
                        <li><a href="">Item Item</a></li>
                        <li><a href="">Item</a></li>
                        <li><a href="">Item Item</a></li>
                    </ul>
                </div>
                <div>
                    <h4><a href="">List</a></h4>
                    <ul>
                        <li><a href="">Item</a></li>
                        <li><a href="">Item Item</a></li>
                        <li><a href="">Item Item</a></li>
                        <li><a href="">Item Item</a></li>
                    </ul>
                </div>
                <div>
                    <h4><a href="">List</a></h4>
                    <ul>
                        <li><a href="">Item Item</a></li>
                        <li><a href="">Item Item</a></li>
                        <li><a href="">Item</a></li>
                        <li><a href="">Item</a></li>
                        <li><a href="">Item</a></li>
                    </ul>
                </div>
                <div>
                    <h4><a href="">List</a></h4>
                    <ul>
                        <li><a href="">Item</a></li>
                        <li><a href="">Item</a></li>
                        <li><a href="">Item</a></li>
                    </ul>
                </div>
                <div>
                    <h4><a href="">List</a></h4>
                    <ul>
                        <li><a href="">Item</a></li>
                        <li><a href="">Item Item</a></li>
                        <li><a href="">Item (Item)</a></li>
                        <li><a href="">Item Item</a></li>
                        <li><a href="">Item do Item</a></li>
                        <li><a href="">Item na Item </a></li>
                        <li><a href="">Item s Item </a></li>
                        <li><a href="">Item s Item </a></li>
                        <li><a href="">Item pro Item</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

And here is the CSS

#tree .tree-all-expanded{
    display: flex;
}
#tree .tree-all-expanded .tree-all-expanded-detail{
    width: 800px;
}
#tree .tree-all-expanded .tree-all-expanded-detail > div{
    padding: 14px 20px;
    width: 100%;
    height: 100%;
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -webkit-column-fill: auto;
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -moz-column-fill: auto;
    column-count: 3;
    column-gap: 15px;
    column-fill: auto;
}
#tree .tree-all-expanded .tree-all-expanded-detail > div > div{
    display: block;
    word-wrap: break-word;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    margin-bottom: 12px;
}

I think the problem is with column-break-inside: avoid;. I tried some solutions I found there but they seem outdated and I wasn't able to fix it.

Code works perfectly in Chrome and Edge. Only issue is Firefox.

Thank you and have a nice day :)

Kyrbi
  • 2,212
  • 7
  • 25
  • 42

1 Answers1

0

In Firefox should be used: break-inside: avoid; But that is not the problem, column-fill: auto; is. I changed it to column-fill: balance; and it works everywhere. But it may not be exactly what you want since with balance:

Content is equally divided between columns. In fragmented contexts, such as paged media, only the last fragment is balanced. Therefore in paged media, only the last page would be balanced.

https://developer.mozilla.org/en-US/docs/Web/CSS/column-fill

Ivana Bakija
  • 334
  • 2
  • 10