title: CSS display:table-cell, set height and overflow:hidden, doesn't work?
body: <p>I want to clip an element if its children's content is too large, but it's not working in <code>display:table-cell</code> elements. Here is an example on JsFiddle:</p>
  
  <p><a href="https://jsfiddle.net/Perhaps/rycuwq3w/" rel="nofollow">JSFiddle</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.table{
      display: table;
      table-layout: fixed;
      width: 100%;
      height:200px;
  }
  .cell{
        display: table-cell;
        vertical-align: top;
        position: relative;
        height:200px;
        overflow:hidden;
  }
  .container{
    height:100%;
    background-color:red;
  }
  .container img{
    display:block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="table"&gt;
      &lt;div class="cell"&gt;
          &lt;div class="container"&gt; 
            &lt;img src="http://img5.imgtn.bdimg.com/it/u=172690696,3532821463&amp;fm=206&amp;gp=0.jpg" /&gt;
             &lt;img src="http://img5.imgtn.bdimg.com/it/u=172690696,3532821463&amp;fm=206&amp;gp=0.jpg" /&gt;
              &lt;img src="http://img5.imgtn.bdimg.com/it/u=172690696,3532821463&amp;fm=206&amp;gp=0.jpg" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Anybody Please tell where am I wrong? Thanks!</p>