这个简单的html片段在chrome中显示了相当不稳定的行为

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

HTML

我在一个大窗户里看它

2缩小窗户。红色的桌子从上面的屏幕上消失了

3.把窗户再缩一缩。有一次，它突然断裂，变得很小

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

---

你知道这是怎么回事吗？

我有Chrome 38，但我没有看到任何东西在跳转之前跳转：跳转之后：你在使用表格进行布局吗？因为如果您是，实际上有比表更好、更少的错误解决方案。表格单元格的尺寸计算起来很奇怪，可能无法在不同浏览器之间统一处理。我怀疑这是不稳定的，因为您的大小不符合逻辑。一个电池是50%，但另一个是300px，但整个表是100%。难怪浏览器会感到困惑。如果桌子的高度超过600像素，这些数字就不起作用。

<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>

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