Search code examples
cssoverflowcss-multicolumn-layout

Strategies for overflowing content in CSS3 multi-column

I am trying to setup multi-column layout using the new multi-column layout. But is there anyway to allow flexible widths for the created columns?
All strategies I've seen online always result in fixed-width layouts, even when the content overflows the column. 

ul {
    -webkit-column-width: 80px;
    height: 80px;
}
<ul>
    <li>element</li>
    <li>elementthat'stoolong</li>
    <li>element</li>
    <li>element</li>
    <li>element</li>
    <li>element</li>
    <li>element</li>
    <li>element</li>
</ul>

JSFiddle Example

Solution

  • I don't think there's a way to do this so I went back to my previous solution of paging the results into <div>s and then having each of those pages sized as wide as necessary.