溢出滚动条没有显示在Firefox中100%的高度div上

Question

我重新创建了一个CSS兼容性问题，我遇到了Chrome和Firefox之间的问题。

具有100%高度的“内”DIV，位于固定高度的“容器”DIV内的表单元格内。我希望内部DIV填充单元格，并动态地向其添加文本，以便在开始溢出时出现滚动条。

在JSFiddle中，您可以在Chrome和Firefox中看到代码。在Chrome中，它的行为与预期一样，但在Firefox中，滚动条不显示，内部DIV只是不断地超出容器DIV的高度。

在Chrome和Firefox中试用的JSFiddle代码

HTML如下：

<style>
#container {
  height:80px;
  width:100%;
  border:1px solid;
  overflow:hidden;
  resize:vertical;
}

#inner {
  height:100%;
  width:300px;
  border:2px solid red;
  overflow-y:auto;
}

table{
  height:100%;
}
</style>

<div id="container">
<table>
<tr>
  <td>
  <div id="inner">
    Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>
  </div>
  </td>
  <td>
  <img src="https://doc-snapshots.qt.io/qt-mobility/images/used-in-examples/video/qmlvideo/images/close.png" />
  </td>
</tr>
</table>
</div>

编辑，进一步的要求:我忘记提到在可调整大小的DIV中有这个设置，即Container能够调整它的高度，以便表和内部DIV相应地调整大小。

Answer 1

这是一个常见的错误。每当一个元素被设置为height: 100%或任何其他百分比时，它都与其父元素的height相关。因此，在使用此方法时，为元素的父元素定义一个height非常重要：

为了演示这个问题:向父<td class="fix">添加一个类并添加一些css修复了这个问题：

.fix {
  height: 80px;
  display: block;
}

工作JSFIDDLE演示

请记住，在更改元素根时，应该避免将表单元格的display属性从table-cell设置为block。如果有可能，可以考虑不使用<table>标记的解决方案。