Why does horizontal list item justification not work with dynamically added items

Why does horizontal list item justification not work with dynamically
added items

I'm creating a grid of divs, and I decided to use an unordered list as the
container, so that I can take advantage of horizontally justifying the
list items that will contain the divs. The problem is that the
justification only works with the HTML written in advance of the page
load. If I try to create and add the list items dynamically with
Javascript, the justification fails.
This fiddle demonstrates the problem with two unordered lists, where one
is populated statically (succeeds) and the other dynamically (fails).
Here's the code:
HTML
<ul>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
</ul>
<ul id="list"></ul>
Javascript
var list = document.getElementById("list");
for (var i=0; i<3; i++) {
var li = document.createElement("li");
var div = document.createElement("div");
li.appendChild(div);
list.appendChild(li);
}
CSS
ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: justify;
}
ul:after {
content: "";
width: 100%;
display: inline-block;
}
li {
display: inline;
}
div {
display: inline-block;
width: 100px;
height: 100px;
background: #4391EE;
border: 1px solid black;
}