Splitting list of items in two columns with CSS

css, css-multicolumn-layout, flexbox

Solution

ul {
  -webkit-columns: 2;
     -moz-columns: 2;
          columns: 2;
  padding-left: 0;
}
ul li {
  list-style-position: inside;
  -webkit-column-break-inside: avoid;
            page-break-inside: avoid;
                 break-inside: avoid;
}

<ul>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
</ul>

Note `columns` is actually a shorthand for <'column-width'> || <'column-count'>. This means you can also specify the width (in `px`, `%`, `em`, `cm`, `in`...) instead of specifying the number of columns.

Also note you need to set `list-style-position: inside;` for `ol` and `ul` elements to display their children `<li>`s bullets (or numbers) on the right side column, except for Firefox, which sets `list-style-position` to `inside` by default.

Problem

I have a list of items (fetched from CMS) whose number is unknown. I need to display this list in two columns of roughly equal number of items. The following code works but I explain below why it's problematical: ``` <ul> <li>content</li> <li>content</li> <li>content</li> <li>content</li> <li>content</li> </ul> ul { display: flex; flex-wrap: wrap; } ``` It's all good if the items' content is always the same height. But when one item has a much longer content in it, the sibling item on the same row is forced to expand to match the same height. I don't want that. I want the two columns to be completely independent in terms of items' height. Possible with CSS alone? EDIT: Here is a JSfiddle exposing the problem: https://jsfiddle.net/g9p3m2dp/

Original source