<html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> .outer { display:table; height:20px; width:300px; max-width:300px; } .inner { background-color: silver; display:table-cell; height:20px; min-height:20px; width:150px; max-width:150px; padding: 4px; } .inner.clipped { padding: 0; } .inner.clipped > .clip { padding: 4px; } .clip { overflow:hidden; width: 300px; height: 20px; box-sizing: border-box; } </style> </head> <body> <h2>Testing CSS overflow on display:table-cell</h2> <div class="outer"> <div class="inner clipped"> <div class="clip" style="overflow-x: auto; overflow-y: hidden"> <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs="> </div> </div> </div> <div class="outer"> <div class="inner clipped"> <div class="clip" style="overflow-x: auto; overflow-y: scroll"> <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs="> </div> </div> </div> <div class="outer"> <div class="inner clipped"> <div class="clip" style="overflow-y: clip"> <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs="> </div> </div> </div> <div class="outer"> <div class="inner clipped"> <div class="clip" style="overflow: hidden"> <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs="> </div> </div> </div> <div class="outer"> <div class="inner clipped"> <div class="clip" style="overflow: scroll"> <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs="> </div> </div> </div> <div class="outer"> <div class="inner clipped"> <div class="clip" style="overflow: clip"> <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs="> </div> </div> </div> <h2>Testing CSS overflow on display:table</h2> <div class="outer"> <div class="inner"> <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs="> </div> </div> <div class="outer"> <div class="inner"> <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs="> </div> </div> <div class="clip"><div class="outer"> <div class="inner"> <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs="> </div> </div></div> <div class="clip"><div class="outer"> <div class="inner"> <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs="> </div> </div></div> <div class="outer"> <div class="inner"> <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs="> </div> </div> <div class="clip"><div class="outer"> <div class="inner"> <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs="> </div> </div></div> </body></html>