为什么text-align：justify不适用于子块元素

Question

好奇为什么text-align：justify不能使用子块元素？

这是我的HTML：

<div class="parent">
   <div class="inline-child"></div>
   <div class="inline-child"></div>
   <div class="inline-child"></div>
   <div class="block-child"></div>
</div>

这是我的css：

.parent {
    width: 100%;
    background: black;
    text-align: justify;
}

.inline-child {
    display: inline-block;
    vertical-align: top;
    height: 100px;
    width: 30%;
    background: red;
}

.block-child {
    /* display: inline-block;
    width: 100%; */
}

此时，代码不起作用，但如果我将block-child内联，则可以使用。为什么？ http://jsfiddle.net/aLv8dp2z/1/