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

Question

I have recreated a CSS compatibility issue I have come across between Chrome and Firefox.

An "inner" DIV with 100% height inside a Table cell which is inside a "container" DIV of fixed height. I want the inner DIV to fill the cell and dynamically add text to it such that a scrollbar appears when it begins to overflow.

In the JSFiddle you can see the code in both Chrome and Firefox. In Chrome it behaves as expected but in Firefox the scrollbar doesn't display and the inner DIV just keeps expending beyond the height of the container DIV.

JSFiddle code to try in both Chrome and Firefox

HTML as follows:

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

EDIT, further requirement: I forgot to mention that I have this setup inside a resizable DIV ie the Container DIV is able to resize it's height so that the table and Inner DIV resize accordingly.

Answer 1

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

You can use this CSS. I think it may work fine.

Answer 2

Thats a common mistake. Whenever an element is set to height: 100% or any other percentage, it relates to the height of its parent. So when using this, its important to define a height for the parent of your element:

To demonstrate the problem: Adding a class to the parent <td class="fix"> and add some css fixes the problem:

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

WORKING JSFIDDLE DEMO

Keep in mind that setting the display attribute of a table cell from table-cell to block is something you should avoid, as you are changing the elements roots. Consider a solution without using a <table> markup if you have got the possibilities.