Display ul li items in two columns with a scrolling vertical overflow - html

Question

I'd like to display two columns of li objects within a ul, with a fixed height where the items scroll vertically.
I'm creating the columns of li objects using the css columns rule, but at the moment the result ignores the number of columns I specify, and the overflow-y rule, and overflows horizontally instead.
Does anyone know how to get the ul to scroll vertically with a 2 fixed columns instead?
Note - I need to keep all the lis within a single ul as they are being used as part of a JQuery Sortable control.
Markup
<ul class="twoColsVerticalScroll">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
... lots of lis ...
</ul>
Css
.twoColsVerticalScroll {
height: 100px;
width: 400px;
overflow-y: scroll;
background-color: red;
-moz-columns: 2 100px;
-webkit-columns: 2 100px;
columns: 2 100px;
}
Result
https://jsfiddle.net/xh4kq0h5/

Answer 1

Wrap your list in div with overflow: scroll and set its sizes. Then set width of columns to 50%; Don't forget to reset margins and paddings of ul.
Update
Add FF support.
ul {
padding: 0;
margin: 0;
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-width: 50%;
-moz-column-width: 50%;
column-width: 50%;
}
div {
width: 420px;
height: 200px;
border: 1px solid;
overflow-y: scroll;
}
<div>
<ul class="twoColsVerticalScroll">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
</ul>
</div>