CSS display:table-cell, set height and overflow:hidden, doesn't work?

Question

I want to clip an element if its children's content is too large, but it's not working in display:table-cell elements. Here is an example on JsFiddle:

JSFiddle

.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;
}

<div class="table">
    <div class="cell">
        <div class="container"> 
          <img src="http://img5.imgtn.bdimg.com/it/u=172690696,3532821463&fm=206&gp=0.jpg" />
           <img src="http://img5.imgtn.bdimg.com/it/u=172690696,3532821463&fm=206&gp=0.jpg" />
            <img src="http://img5.imgtn.bdimg.com/it/u=172690696,3532821463&fm=206&gp=0.jpg" />
        </div>
    </div>

Anybody Please tell where am I wrong? Thanks!

Answer 1

To make it work, we have to use position:relative for table and position:absolute for table cell item. Also in your code, I've removed container's height: 100% which is of no use. Here's the preview and fiddle.

.table{
    display: table;
    table-layout: fixed;
    width: 100%;
    height:200px;
    position: relative;
}
.cell{
      display: table-cell;
      vertical-align: top;
      position: absolute;
      height:200px;
      width: 100%;
      overflow-y:scroll;
      overflow-x: hidden;
}
.container{
  background-color:red;
}
.container img{
  display:block;
}

<div class="table">
    <div class="cell">
        <div class="container"> 
          <img src="http://img5.imgtn.bdimg.com/it/u=172690696,3532821463&fm=206&gp=0.jpg" />
           <img src="http://img5.imgtn.bdimg.com/it/u=172690696,3532821463&fm=206&gp=0.jpg" />
            <img src="http://img5.imgtn.bdimg.com/it/u=172690696,3532821463&fm=206&gp=0.jpg" />
        </div>
    </div>