内联块元素只是流出，而不是转到下一行

Question

使用DOM PDF时，元素只是从其父元素中流出，而不是在渲染后转到下一行，就像这样：

* {
  font-size: x-small;
  font-family: Arial, Helvetica, sans-serif;
}

.child {
  background-color: orange;
  display: inline-block;
  width: 25%;
  vertical-align: top;
}

	<div style="background-color:pink;">
		<div style="background-color:red;float:left;width:50%;">PARENT</div>
		<div style="background-color:green;float:left;width:50%;">
			<div class="child">CHILD</div><!--
			--><div class="child">CHILD</div><!--
			--><div class="child">CHILD</div><!--
			--><div class="child">CHILD</div><!--
			--><div class="child">CHILD</div><!--
			--><div class="child">CHILD</div><!--
			--><div class="child">CHILD</div><!--
			--><div class="child">CHILD</div><!--
			--><div class="child">CHILD</div>
		</div>
	</div>

DOM PDF的渲染输出：

我期望的是这样的（浏览器的输出）：

已经尝试使用float:left代替display:inline-block，但是元素只是相互重叠，所以我选择后者。

还有什么其他方法可以实现与浏览器相同的输出？