CSS Multi-column not working (in Chrome/Safari) if both width and number are present

Question

I have the following CSS:

#maincontent {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
-webkit-column-width: 150px;
-moz-column-width: 150px;
column-width: 150px;
max-width: 80%;
float: left;
}

It works as expected in Firefox(48), IE(10), and Edge, but in Chrome(54) and Safari(10) the width of the columns are not respected, only the number of columns.

If I remove the number of columns, I get the correct width in Safari and Chrome (and could set a width of the div and live with it), but alas this causes all the other browsers (FF, IE, Edge) to display only one long column instead of a number of 150px wide columns.

Does anyone have a solution to make this work in all browsers? Or a reasonable polyfill that will? (or barring that, some other js solution that will work everywhere).

here it is running:

#maincontent {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
-webkit-column-width: 150px;
-moz-column-width: 150px;
column-width: 150px;
max-width: 80%;
float: left;
}

<div id="maincontent">Lorem ipsum dolor sit amet, no pertinax suavitate per. Detraxit qualisque qui in. Id enim omittantur cum, eu per commodo civibus. At duo offendit explicari, electram constituto eu eam. Tale dicat repudiare mei ex, te vis quem nonumy. Posse lorem in vim.

Mei ut similique interesset, vis ut posse meliore, ex qui harum dolor possit. Id atqui consul pertinax vix, eam in vide duis postulant. Eu duo dicant maluisset, facilis vituperata ea qui, pro ne nonumy regione volumus. Duo ne lorem movet signiferumque, sit ad debet labore cotidieque, ea quo meliore neglegentur. Eos te postea nemore, his in porro consequat. Mei ne graeco invidunt postulant.

Te nec eirmod melius necessitatibus, falli volutpat sit at. Minim fuisset adipiscing pro eu, ut sea quod alii patrioque, pro ad elitr complectitur. Ut elitr omnesque indoctum eum. Eum id graeci iisque disputationi, his fastidii gubergren at. Quo illum mucius iisque in.

Enim causae veritus sea no. Utroque facilisi has ut. Sed postea sensibus in, vocent voluptaria et duo. Malis aliquam commune eu pri, his sale dicta laudem eu, cum aeterno eleifend reformidans in. Tation nusquam ut nam.

Pro iriure explicari an, nec modus animal eu. Ludus insolens quo no. Soleat nominati senserit at eos, eripuit ancillae vix ei, ut vidit augue reprehendunt eum. Eu per inermis phaedrum. Eam quod graece facete et. Nec eu mundi nusquam corrumpit.

Ad vel tamquam salutatus. Nam an exerci aperiam minimum. Semper iracundia ex ius, usu erat adipiscing id. Sint mucius iriure ius ei. Per et omittam assentior, ubique eleifend repudiare ei eum.

Ut movet prompta constituam vim, aperiam tacimates no has, tale singulis est te. Te praesent reprehendunt vel, vel cu menandri indoctum gloriatur, mel ex postea option nominati. Voluptua accommodare nec ne. Comprehensam vituperatoribus mei ea, falli dissentiunt sea ut. Iriure prompta imperdiet mea et, ullum possit tractatos pro at. Pericula vituperata te qui. Nam errem vocibus salutandi no, qui ea commune salutatus dissentias.

Est pertinax patrioque eu. Ea deserunt dignissim duo, mea doming mandamus ne, soluta altera officiis eu per. Diceret abhorreant ei vim. Eirmod minimum vituperata nec te, elitr verterem eu pro, amet mutat deterruisset ut vel. Ut mel accusam persecuti voluptatibus, ex mei hinc malis. Prima postulant voluptaria nam ea, mei viris nihil eirmod te.

Cu pro nominavi luptatum incorrupte, eum modus appellantur conclusionemque no, habeo offendit pertinax no eam. Sea ferri placerat forensibus ei, ius ei omnium intellegebat. Ludus nobis pri et. Eam congue oblique accusam et, ferri copiosae pro in, te sea dolor prompta. Pericula urbanitas constituam cum cu, eu pri nostro definiebas, verear graecis imperdiet no mei.

Sapientem maiestatis rationibus nam ut. Quo in stet discere elaboraret. At utamur invenire quo, ne quo tollit atomorum. Ne dissentiet concludaturque vel, et mei illud atomorum posidonium. Mollis fierent cu cum, eu sea tota soleat essent, ei sea meis labore disputationi.

Qui fierent omnesque torquatos no. Id vidit moderatius definitiones vim, purto saepe cum ne, per at insolens sapientem intellegat. Veri indoctum ei mel, solum lobortis gubergren ad mea. Omittam sensibus consequat an est, nam petentium conceptam ut, mei autem dolore an. Per ad malis adolescens.

Ad posse malis sea, an vero eleifend intellegebat per, duo inani evertitur et. Ex sed veri aeque explicari, vero tota dissentiunt usu ei. At quo laudem timeam pertinax. Unum diceret blandit an vix, mea ut zril impetus, alterum eloquentiam ei sed.

Adolescens mnesarchum efficiantur et sed. Usu eu decore audiam oblique. Delenit alienum ea ius. Ad dico dicit consetetur mel, purto unum incorrupte ei duo. His saepe reprimique ne, augue apeirian at cum.

Eros etiam quaestio eos ei, possim recusabo ne cum. Ut etiam falli eruditi duo, mel in mundi sonet comprehensam. Qui choro consequuntur ne, cu vocent iracundia persecuti eum. An lucilius volutpat tincidunt pri, quo possit persecuti eloquentiam ea. Quot erant quaerendum mei te, aperiam consulatu ad mei. Et cibo minim affert pri, id pri dicant ornatus.

Te has clita doming, copiosae postulant reformidans vix et. Est in quodsi virtute. Duo et nonumy rationibus. Dolores sententiae ea sea, liberavisse ullamcorper ad mea. Quas placerat his ad, option malorum consulatu vis ne. Ei vix singulis accusamus.</div>

Answer 1

As per my comment, the column-count dictates the maximum number of columns, but the column-width dictates the minimum column width. Therefore, browsers will attempt to spread the text into 3 columns and expand the width of each column so that they fill the max-width of 80%, while ensuring column width do not fall below (but not restricted to) 150px.

To circumvent your problem, you will need to explicitly specify the max-width of the parent element, by setting it to the computed width containing the column widths and gutter widths, i.e. max-width: calc(450px + 2em). Note: the default value of column-gap (the property that defines the gutter width) is 1em.

#maincontent {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
-webkit-column-width: 150px;
-moz-column-width: 150px;
column-width: 150px;
max-width: calc(450px + 2rem);  /* Column widths + gutter widths */
float: left;
}

<div id="maincontent">Lorem ipsum dolor sit amet, no pertinax suavitate per. Detraxit qualisque qui in. Id enim omittantur cum, eu per commodo civibus. At duo offendit explicari, electram constituto eu eam. Tale dicat repudiare mei ex, te vis quem nonumy. Posse lorem in vim.

Mei ut similique interesset, vis ut posse meliore, ex qui harum dolor possit. Id atqui consul pertinax vix, eam in vide duis postulant. Eu duo dicant maluisset, facilis vituperata ea qui, pro ne nonumy regione volumus. Duo ne lorem movet signiferumque, sit ad debet labore cotidieque, ea quo meliore neglegentur. Eos te postea nemore, his in porro consequat. Mei ne graeco invidunt postulant.

Te nec eirmod melius necessitatibus, falli volutpat sit at. Minim fuisset adipiscing pro eu, ut sea quod alii patrioque, pro ad elitr complectitur. Ut elitr omnesque indoctum eum. Eum id graeci iisque disputationi, his fastidii gubergren at. Quo illum mucius iisque in.

Enim causae veritus sea no. Utroque facilisi has ut. Sed postea sensibus in, vocent voluptaria et duo. Malis aliquam commune eu pri, his sale dicta laudem eu, cum aeterno eleifend reformidans in. Tation nusquam ut nam.

Pro iriure explicari an, nec modus animal eu. Ludus insolens quo no. Soleat nominati senserit at eos, eripuit ancillae vix ei, ut vidit augue reprehendunt eum. Eu per inermis phaedrum. Eam quod graece facete et. Nec eu mundi nusquam corrumpit.

Ad vel tamquam salutatus. Nam an exerci aperiam minimum. Semper iracundia ex ius, usu erat adipiscing id. Sint mucius iriure ius ei. Per et omittam assentior, ubique eleifend repudiare ei eum.

Ut movet prompta constituam vim, aperiam tacimates no has, tale singulis est te. Te praesent reprehendunt vel, vel cu menandri indoctum gloriatur, mel ex postea option nominati. Voluptua accommodare nec ne. Comprehensam vituperatoribus mei ea, falli dissentiunt sea ut. Iriure prompta imperdiet mea et, ullum possit tractatos pro at. Pericula vituperata te qui. Nam errem vocibus salutandi no, qui ea commune salutatus dissentias.

Est pertinax patrioque eu. Ea deserunt dignissim duo, mea doming mandamus ne, soluta altera officiis eu per. Diceret abhorreant ei vim. Eirmod minimum vituperata nec te, elitr verterem eu pro, amet mutat deterruisset ut vel. Ut mel accusam persecuti voluptatibus, ex mei hinc malis. Prima postulant voluptaria nam ea, mei viris nihil eirmod te.

Cu pro nominavi luptatum incorrupte, eum modus appellantur conclusionemque no, habeo offendit pertinax no eam. Sea ferri placerat forensibus ei, ius ei omnium intellegebat. Ludus nobis pri et. Eam congue oblique accusam et, ferri copiosae pro in, te sea dolor prompta. Pericula urbanitas constituam cum cu, eu pri nostro definiebas, verear graecis imperdiet no mei.

Sapientem maiestatis rationibus nam ut. Quo in stet discere elaboraret. At utamur invenire quo, ne quo tollit atomorum. Ne dissentiet concludaturque vel, et mei illud atomorum posidonium. Mollis fierent cu cum, eu sea tota soleat essent, ei sea meis labore disputationi.

Qui fierent omnesque torquatos no. Id vidit moderatius definitiones vim, purto saepe cum ne, per at insolens sapientem intellegat. Veri indoctum ei mel, solum lobortis gubergren ad mea. Omittam sensibus consequat an est, nam petentium conceptam ut, mei autem dolore an. Per ad malis adolescens.

Ad posse malis sea, an vero eleifend intellegebat per, duo inani evertitur et. Ex sed veri aeque explicari, vero tota dissentiunt usu ei. At quo laudem timeam pertinax. Unum diceret blandit an vix, mea ut zril impetus, alterum eloquentiam ei sed.

Adolescens mnesarchum efficiantur et sed. Usu eu decore audiam oblique. Delenit alienum ea ius. Ad dico dicit consetetur mel, purto unum incorrupte ei duo. His saepe reprimique ne, augue apeirian at cum.

Eros etiam quaestio eos ei, possim recusabo ne cum. Ut etiam falli eruditi duo, mel in mundi sonet comprehensam. Qui choro consequuntur ne, cu vocent iracundia persecuti eum. An lucilius volutpat tincidunt pri, quo possit persecuti eloquentiam ea. Quot erant quaerendum mei te, aperiam consulatu ad mei. Et cibo minim affert pri, id pri dicant ornatus.

Te has clita doming, copiosae postulant reformidans vix et. Est in quodsi virtute. Duo et nonumy rationibus. Dolores sententiae ea sea, liberavisse ullamcorper ad mea. Quas placerat his ad, option malorum consulatu vis ne. Ei vix singulis accusamus.</div>