Can someone help me figure out why the CSS table in the code below is not hiding the content that exceeds the table height of 200px? Instead, the table is expanding vertically.
<div style='display:table; border:1px solid blue;
width:200px; table-layout:fixed; height: 200px'>
<div style='display:table-row'>
<div style='display:table-cell; overflow:hidden'>
contents<br/>contents<br/>contents<br/>contents<br/>contents<br/>
contents<br/>contents<br/>contents<br/>contents<br/>contents<br/>
contents<br/>contents<br/>contents<br/>
</div>
</div>
</div>
<div style='display:inline-block;width:20px;height:200px;
border:1px solid red; position:absolute;top:8px;left:220px'>
</div>
Any ideas on why this is happening? Thanks!