这个简单的html显示了chrome中非常不稳定的行为

Question

这段简单的html在chrome中表现出非常不稳定的行为：

http://jsfiddle.net/utb4p0wr/

HTML

<table class=universe>
  <tr>
   <td>
    <table class=upper><tr><td>upper</td></tr></table>
    <table class=lower><tr><td>lower</td></tr></table>
   </td>
  </tr>
</table>

CSS

html, body, .universe {
    height: 100%;
}
.upper {
    height: 50%;
    border: 2px solid red;
}
.lower {
    height: 300px;
    border: 2px solid blue;
}

1）在一个大窗口看着它。

2）收缩窗户。红色表逃脱了屏幕！

3）进一步收缩窗户。有一次，它突然啪的一声，变得很小。

在Firefox中，所有这一切都不会发生。

有什么想法在这里发生？