Multicolumn CSS doesn't break properly - css

Question

I have a CSS multicolumn: it is fine in Firefox (<ul> content is not 'broken') but not on Chrome (some items that should be on first column are splitted into second). Looking around I found this solution, but it doesn't seem to work anywhere I place the code.
Here is a full snippet:
.margin-bottom-0 { margin-bottom: 0; }
.double > ul {
columns: 2;
padding: 0;
}
.double > ul ul {
padding-left: 10px;
list-style: circle;
}
.double > ul ul li {
padding-left: 5px;
}
.double li {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
list-style-position: inside;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-xs-8">
<div class="double">
<ul class="list-unstyled margin-bottom-0">
<li>Area docenti
<ul>
<li>Docenti e classi</li>
</ul>
</li>
<li>Area segreteria
<ul>
<li>Organigramma</li>
<li>D. S. G. A.</li>
<li>U. R. P.</li>
<li>Comunicazioni interne personale ATA</li>
<li>Programma annuale</li>
<li>Modulistica</li>
<li>SIDI - Miur</li>
</ul>
</li>
<li>Area genitori
<ul>
<li>Rappresentanti dei genitori</li>
<li>Ricevimento docenti</li>
<li>Patto di corresponsabilità</li>
<li>Libri di testo</li>
<li>Siti tematici</li>
<li>Iscrizioni On Line</li>
</ul>
</li>
<li>Area alunni
<ul>
<li>Viaggi di istruzione</li>
<li>Materiale didattico</li>
<li>Concorsi</li>
<li>Visite guidate</li>
<li>Attività e progetti</li>
</ul>
</li>
<li>Il Dirigente</li>
<li>Organi collegiali</li>
<li>Piano di lavoro
<ul>
<li>POF</li>
<li>PTOF</li>
<li>PON</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
You see, "Siti tematici" and "Iscrizione On Line" should be on the first column, right after "Libri di testo" (they are part of the same <ul>): instead, they go on the second column.
Looking further I discovered that overflow: hidden; (that I need for ellipsis) is what's causing the correct behavior in Firefox and the wrong one on Chrome: if I remove that line, both Firefox and Chrome show the (wrong) 'broken' <ul>, but at least they are consistent...
Any idea to have the columns broken in the right way mantaining the ellipsis, please?

Answer 1

You should use break-inside:avoid on the li
See more here > break inside
And code snippet below :
.margin-bottom-0 {
margin-bottom: 0;
}
.double >ul {
columns: 2;
padding: 0;
}
.double > ul ul {
padding-left: 10px;
list-style: circle;
}
.double > ul ul li {
padding-left: 5px;
}
.double li {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
list-style-position: inside;
-webkit-column-break-inside: avoid;
/* Chrome, Safari, Opera */
page-break-inside: avoid;
/* Firefox */
break-inside: avoid;
/* IE 10+ */
}
<div class="container">
<div class="row">
<div class="col-xs-8">
<div class="double">
<ul class="list-unstyled margin-bottom-0">
<li>Area docenti
<ul>
<li>Docenti e classi</li>
</ul>
</li>
<li>Area segreteria
<ul>
<li>Organigramma</li>
<li>D. S. G. A.</li>
<li>U. R. P.</li>
<li>Comunicazioni interne personale ATA</li>
<li>Programma annuale</li>
<li>Modulistica</li>
<li>SIDI - Miur</li>
</ul>
</li>
<li>Area genitori
<ul>
<li>Rappresentanti dei genitori</li>
<li>Ricevimento docenti</li>
<li>Patto di corresponsabilità</li>
<li>Libri di testo</li>
<li>Siti tematici</li>
<li>Iscrizioni On Line</li>
</ul>
</li>
<li>Area alunni
<ul>
<li>Viaggi di istruzione</li>
<li>Materiale didattico</li>
<li>Concorsi</li>
<li>Visite guidate</li>
<li>Attività e progetti</li>
</ul>
</li>
<li>Il Dirigente</li>
<li>Organi collegiali</li>
<li>Piano di lavoro
<ul>
<li>POF</li>
<li>PTOF</li>
<li>PON</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>