I am having trouble clipping an element when its children's content is too large, particularly within elements styled with display:table-cell. Check out this example on 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>If anyone can help me identify the issue, that would be greatly appreciated. Thank you!