1

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

TylerH
  • 20,799
  • 66
  • 75
  • 101
chustar
  • 12,225
  • 24
  • 81
  • 119
  • I found the question difficult to understand, could you link to the example of the fixed layout which you are trying to make fluid? – Jen Aug 06 '12 at 21:42
  • This is for a chrome extension so I can't link to anything directly. In the jsfiddle though, it shows the one long element being cut off, but I would like the column width to expand to show it. – chustar Aug 06 '12 at 22:35

2 Answers2

1

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.

chustar
  • 12,225
  • 24
  • 81
  • 119
0

To prevent text from overflowing, try:

li {
word-wrap: break-word;
}

Column width can be set not only in pixels but also in % and em, allowing for more flexible layout. To prevent content from collapsing entirely, you would of course set a min-width. According to W3.org, content in the normal flow that extends into column gaps (e.g., long words or images) is clipped in the middle of the column gap.

  • Thanks for the answer. But I _want_ it to overflow, and then expand the contents. I'm thinking there might not be away to do it natively though. – chustar Aug 09 '12 at 20:10