无法解释特殊的溢出行为

Question

请考虑以下代码：

CSS

.logo {
    height: 200px;
    background-color: blue;
}
#logo_style {
    float: left;
    margin-left: 10%;
}
.test {
    height: 200px;
    overflow: auto;
    background-color: red;
}

HTML

<div class="logo">
     <div id="logo_style">
          <img src="img/pencil.png" height="300">
     </div>     
</div>
<div class="test"></div>

和输出：

如果我省略overflow：auto in .test我得到这个：

这是我对两种情况的期望。任何人都可以解释溢出时的不同行为：自动存在吗？

http://jsfiddle.net/60nzadLz/1/

http://jsfiddle.net/kgypo14y/

谢谢