FirefoxのオーバーフロースクロールバーがFirefoxの100％の高さdivに表示されない

Question

私はChromeとFirefoxの間で出会ったCSS互換性の問題を再現しました。

高さが固定された「コンテナ」DIVの内側にある表のセル内に高さ100％の「内側」DIVがあります。内部のDIVがセルを埋めるようにし、動的にテキストを追加して、オーバーフローし始めるときにスクロールバーが表示されるようにします。

JSFiddleでは、ChromeとFirefoxの両方でコードを見ることができます。クロムでは、期待通りに動作しますが、Firefoxではスクロールバーが表示されず、内側のDIVはコンテナDIVの高さを超えて拡大し続けます。

<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、さらなる要件を：：

JSFiddle code to try in both Chrome and Firefox

HTMLは次のように私は、コンテナDIVのサイズを変更することが可能である。すなわち、私はサイズ変更可能な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; 
} 

WORKING JSFIDDLE DEMO

テーブルセルのdisplay属性をtable-cellからblockに設定することは、要素のルートを変更するときに避けるべきことです。可能性がある場合は、<table>マークアップを使用しないで解決策を検討してください。