title: Table cell content scrollable is not working on IE 11
body: <p>I have a div inside table cells. Content of them will dynamically change. I want the div to provide vertical scrollbar in case of overflow (not to expand the height of containing cell!).
  My current implementation <strong>works fine on Chrome and Safari</strong> but <strong>not on IE and Firefox</strong>!
  Here is a sample code represents my problem: <a href="http://jsfiddle.net/vuSAz/5/" rel="nofollow noreferrer">http://jsfiddle.net/vuSAz/5/</a> (open it on IE and chrome to see the difference)</p>
  
  <p>I'm looking for CSS solution (not using JS to resize).
  I don't want to set fixed height for cells. I want the table to fit in the container div even if the container height is changed.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="table"&gt;
      &lt;div class="table-row"&gt;
          &lt;div class="cell"&gt;
              &lt;div class="cellHeader"&gt;Header 1&lt;/div&gt;
              &lt;div class="cellContent"&gt;&lt;/div&gt;            
          &lt;/div&gt;
          &lt;div class="cell"&gt;
              &lt;div class="cellHeader"&gt;Header 2&lt;/div&gt;
              &lt;div class="cellContent"&gt;&lt;/div&gt;            
          &lt;/div&gt;        
      &lt;/div&gt;
      &lt;div class="table-row"&gt;
          &lt;div class="cell"&gt;
              &lt;div class="cellHeader"&gt;Header 1&lt;/div&gt;
              &lt;div class="cellContent"&gt;&lt;/div&gt;            
          &lt;/div&gt;
          &lt;div class="cell"&gt;
              &lt;div class="cellHeader"&gt;Header 2&lt;/div&gt;
              &lt;div class="cellContent"&gt;
                  &lt;div&gt;sample content&lt;/div&gt;
                  &lt;div&gt;sample content&lt;/div&gt;
                  &lt;div&gt;sample content&lt;/div&gt;
                  &lt;div&gt;sample content&lt;/div&gt;
                  &lt;div&gt;sample content&lt;/div&gt;
                  &lt;div&gt;sample content&lt;/div&gt;
                  &lt;div&gt;sample content&lt;/div&gt;
                  &lt;div&gt;sample content&lt;/div&gt;
                  &lt;div&gt;sample content&lt;/div&gt;
                  &lt;div&gt;sample content&lt;/div&gt;    
              &lt;/div&gt;            
          &lt;/div&gt;     
      &lt;/div&gt;
      &lt;div class="table-row"&gt;
          &lt;div class="cell"&gt;
              &lt;div class="cellHeader"&gt;Header 1&lt;/div&gt;
              &lt;div class="cellContent"&gt;&lt;/div&gt;            
          &lt;/div&gt;
          &lt;div class="cell"&gt;
              &lt;div class="cellHeader"&gt;Header 2&lt;/div&gt;
              &lt;div class="cellContent"&gt;&lt;/div&gt;            
          &lt;/div&gt;     
      &lt;/div&gt;    
  &lt;/div&gt;    
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.container{
      height:500px;
      width:100%;
  }
  .table{
      display:table;
      border-collapse:collapse;
      height:100%;
      width:100%;
  }
  .table-row{
      display:table-row;
  }
  .cell{
      display:table-cell;
      border: 1px solid black;
      padding:5px;
      height:20%;
      width:50%;
  }
  .cellHeader{
      height:20px;
  }
  .cellContent{
      overflow-x:hidden;
      overflow-y:auto;
      height:90%;
  }
  </code></pre>