title: 100% height div inside table-cell not working on Firefox
body: <p>I'm trying to create a two column 100% height layout using the display table-cell property. It is working fine on Chrome, but I'm not having success on Firefox nor IE.</p>
  
  <p>Here is the fiddle: <a href="http://jsfiddle.net/ehfa0kk8/5/" rel="nofollow noreferrer">http://jsfiddle.net/ehfa0kk8/5/</a></p>
  
  <p>Take a look at how it works on Chrome. Any idea of how to make this work?</p>
  
  <pre><code>&lt;div id="table"&gt;
      &lt;div id="row"&gt;
          &lt;div id="cell_1"&gt;
              &lt;div id="overflown_div"&gt;
                  long content goes here...
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="cell_2"&gt;
              Blah blah blah
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>UPDATE: First, there should be enough content on the left column so it will overflow. On Chrome it shows a scroll bar so you can scroll just the content of that column (cell). On Firefox it doesn't happen.</p>
  
  <p>EXAMPLE:
  <img src="https://i.stack.imgur.com/6NGEI.jpg" alt="enter image description here"></p>