CSS column layout hide empty columns - html

Question

I've done a few things with css columns and I really like them, but today I stumbled into a problem for which I just won't find a solution:
I have a page with multiple lists. These lists have dynamic contents and open up in small popups. The old behaviour was, that the list contents have been shown in a single column (normal HTML <ul>). The new behaviour should be that they are displayed in up to 4 columns. So I have extended my CSS with ul { column-count: 4; }. This works pretty nice for lists with many entries.
Now to my problem: sometimes there are lists with less then 4 entries. If that's the case, the popups for the lists still span 4 columns, with only 2 columns filled. So the popup for the less-filled list is still as wide as a popup with a full-filled list. For example:
ul {
background-color: lime;
list-style: none;
column-count: 4;
}
<ul>
<li>entry 1</li>
<li>entry 2</li>
<li>entry 3</li>
<li>entry 4</li>
<li>entry 5</li>
<li>entry 6</li>
<li>entry 7</li>
<li>entry 8</li>
<li>entry 9</li>
<li>entry 10</li>
<li>entry 11</li>
<li>entry 12</li>
</ul>
<ul>
<li>entry 1</li>
<li>entry 2</li>
</ul>
My question now is: How do I hide those empty columns? I want a popup with a less filled list (no. of entries < 4) to be less wide then a popup with a full-filled list. I'd like to find a CSS-only solution, as I didn't intend to count the entries and add extra classes to decrease the column-count.
The order in which the elements are displayed is important: top-down and then left-right.
I've tried using flexbox, but there I have to set a fixed width for the container, which just results in the popups being too wide as well.
Edit for clarification:
The dotted line should be the right border for the second popup.
The diagonal lines mark the empty space I need to be gone.
Edit further approaches:
Another approach posted by user 'Gobbin' as answer, is to use flex. But as I mentioned, I'd have to set some fixed width. Here it is a max-width for the list itself, so that wrapping works and a fixed width for the list elements. I don't want to have either. Also this approach lists the items from left to right and then from top to bottom, which is also not what I need:
ul {
list-style: none;
display: inline-flex;
flex-wrap: wrap;
max-width: 16em;
float: left;
clear: both;
}
li {
background-color: lime;
width: 4em;
}
<ul>
<li>entry 1</li>
<li>entry 2</li>
<li>entry 3</li>
<li>entry 4</li>
<li>entry 5</li>
<li>entry 6</li>
<li>entry 7</li>
<li>entry 8</li>
<li>entry 9</li>
<li>entry 10</li>
<li>entry 11</li>
<li>entry 12</li>
</ul>
<ul>
<li>entry 1</li>
<li>entry 2</li>
</ul>

Answer 1

Maybe this is an option for you, although the columns are spread across the available width.
var maxColumns = 4;
$("ul").each(function() {
var numColumns = $(this).find("li").length;
$(this).css("column-count", numColumns);
$(this).css("width", 25*numColumns + "%");
});
ul {
background-color: lime;
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>entry 1</li>
<li>entry 2</li>
<li>entry 3</li>
<li>entry 4</li>
</ul>
<ul>
<li>entry 1</li>
<li>entry 2</li>
</ul>

Answer 2

I think this is your desired layout. Edited my answer as the list items still had margins.
ul {
list-style: none;
display: inline-flex;
float: left;
clear: both;
}
li{
background-color: lime;
width: 100%;
display: inline;
}
<ul>
<li>entry 1</li>
<li>entry 2</li>
<li>entry 3</li>
<li>entry 4</li>
</ul>
<ul>
<li>entry 1</li>
<li>entry 2</li>
</ul>