HTML CSS examples for CSS Widget:Table Cell
Overflow scroll table cell with width:auto or width:100%
<html> <head> <meta name="viewport" content="width=device-width"> <style> html,body { width:100%; height:100%; display:block; } * {<!--from w w w . j av a2 s. c o m--> box-sizing:border-box; padding:0; margin:0; } ul { list-style:none; border:2px solid Chartreuse; } ul.layout { width:100%; height:100%; display:table; } ul.layout li { display:table-cell; } li>.scrollable { position:absolute; top:0; bottom:0; left:0; right:0; overflow:auto; } </style> </head> <body> <ul class="layout"> <li> <div style="width:200px"> Lorem ipsum </div> </li> <li style="width:100%; position:relative;"> <div class="scrollable"> <div style="width:1000px; height:1000px; background:#f05555;"> Lorem ipsum dolor sit amet, </div> </div> </li> <li> <div style="width:300px"> Lorem ipsum </div> </li> </ul> </body> </html>