当父按钮时，为什么孩子在FF中溢出父母的左边填充？

Question

当按钮的按钮本身溢出时，它们通常向右移动，但在FF中，它们突然在左边执行。我该如何防止这种行为？是FF bug吗？

示例HTML：

<button class="test"><span class="child"></span><span class="child"></span></button>

示例CSS：

.test {
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  border: none;
  background: red;
  white-space: nowrap;
  padding: 10px;
  text-align: left;
}

.child {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid green;
  background: blue;
}

示例：http://cssdeck.com/labs/m6vnniol