html - css - overflow: hidden in div nested inside display: table-cell -
i've got problem overflow in div nested inside div has display: table-cell style. i'm not sure why content #left-wrapper not cropped (hidden) when exceeds height of #left-wrapper. in advance advices. fiddle link: http://jsfiddle.net/bpbhy/1/
here's markup:
<div id="wrapper"> <div id="left"> <div id="left-wrapper"> <ul> <li>menu item</li> <li>menu item</li> <li>menu item</li> <li>menu item</li> <li>menu item</li> <li>menu item</li> <li>menu item</li> <li>menu item</li> <li>menu item</li> <li>menu item</li> <li>menu item</li> <li>menu item</li> <li>menu item</li> <li>menu item</li> <li>menu item</li> <li>menu item</li> <li>menu item</li> <li>menu item</li> <li>menu item</li> <li>menu item </li> <ul> </div> </div> <div id="center">center content</div> <div id="right">right</div> </div> css:
#wrapper { display:table; width:100%; height:100%; } #wrapper > div { display:table-cell; height:100%; } #left { width:70px; min-width:80px; height: 100%; background-color:pink; } #left-wrapper { overflow: hidden; height: 100%; } #center { background-color:green; min-width:200px; } #right { width:50px; min-width:50px; background-color:red; } li { line-height: 80px; } body, html { width:100%; height:100%; }
the overflow: hidden not working because using display: table , display: table-cell. , used positioning center #center.
here working fiddle
ps: using min-width: 200px might want change need.
Comments
Post a Comment