Firefox中100％高度div上不显示溢出滚动条

Question

我已经重新创建了在Chrome和Firefox之间遇到的CSS兼容性问题。

在表格单元格内具有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能够调整其高度，以便表格和Inner DIV相应地调整大小。

Answer 1

#inner {
      border: 2px solid red;
      height: 75px;
      overflow: auto;
      width: 300px;
    }

您可以使用此CSS。 我认为这可能很好。

Answer 2

那是一个常见的错误。 每当将元素设置为height: 100%或任何其他百分比时，它均与其父级的height相关。 因此，使用此参数时，为元素的父级定义height很重要：

演示问题：将类添加到父<td class="fix">并添加一些CSS可以解决此问题：

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

工作JSFIDDLE演示

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