表格单元格内的100%高度div不适用于Firefox

我正在尝试使用display table-cell属性创建两列100%高度布局.它在Chrome上运行良好,但我在Firefox和IE上都没有成功.

这是小提琴:http://jsfiddle.net/ehfa0kk8/5/

看看它在Chrome上的工作原理.知道如何使这项工作？

    

        

            

                long content goes here...
            
        
        

            Blah blah blah
        
    

和CSS

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#table {
    width: 100%;
    display: table;
    height: 100%;
}

#row {
    display: table-row;
}

#cell_1, #cell_2 {  
    display: table-cell;
    height: 100%;
}

#cell_1 {
    width: 390px;
    background: aliceblue;
}

#cell_2 {
    background: yellow;
}

#overflown_div {
    height: 100%;
    overflow: scroll;
    padding: 10px;
}

更新:首先,左栏应该有足够的内容,以便它会溢出.在Chrome上它会显示一个滚动条,因此您只能滚动该列(单元格)的内容.在Firefox上它不会发生.

例:

诀窍是:

将行设置height为100%

将单元格设置height为0

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#table {
  width: 100%;
  display: table;
  height: 100%;
}
#row {
  display: table-row;
  height: 100%;
}
#cell_1,
#cell_2 {
  display: table-cell;
  height: 0;
}
#cell_1 {
  width: 390px;
  background: aliceblue;
}
#cell_2 {
  background: yellow;
}
#overflown_div {
  height: 100%;
  overflow-y: scroll;
  padding: 10px;
  box-sizing: border-box;
}
#overflown_div p {
  height: 80px;
}

  

    

      

        
Blah blah blah
        
Blah blah blah
        
Blah blah blah
        
Blah blah blah
        
Blah blah blah
        
Blah blah blah
        
Blah blah blah
        
Blah blah blah
        
Blah blah blah
        
Blah blah blah
      
    
    

      Blah blah blah