如何使儿童身高100％的容器适合不同的缩放级别

Question

我正在试图弄清楚如何让孩子的身高填满容器。

Fiddle

我的代码中有2个容器

<div class="container">
    <div class="blueBox"></div>
    <div class="redBox"></div>
    <div class="greenBox"></div>    
</div>
<div class="container">
    <div class="blueBox"></div>
    <div class="redBox"></div>
    <div class="greenBox"></div>        
</div>

案例编号1：缩放100％

第一个容器在border-bottom之前有'white space'，但第二个容器没有一个

案例编号2：缩放110％

第二个容器在border-bottom之前有'white space'，但第二个容器没有

案例3：缩放125％ 两个容器在border-bottom

之前没有空格

问题：为什么相同的代码有不同的输出？以及如何删除“空白区域”

注意：我使用的是chrome 58.0.3029.110