css - Chrome displaying table-cell with 0 width as 1px -

css - Chrome displaying table-cell with 0 width as 1px -

in firefox (correctly, believe), no reddish div seen due width: 0 in chrome, displayed having 1px width. seems issue recent versions of chrome. this fiddle shows issue.

the code is:

<div id="wrapper"> <div></div> </div> #wrapper { background: yellow; height: 100px; width: 100px; } #wrapper div { display: table-cell; height: 100px; width: 0px; background: red; }

does know why happens or workaround?

chrome (and other webkit-based browsers) allow table cell have 0 size if has no content, no background, , no borders. add together 1 of things, , 1px minimum width , height.

in particular case, might able work around bug setting overflow: hidden on container div , shifting table-cell div left 1px via relative positioning. firefox ignores relative positioning on table cells, shouldn't affected. don't know ie, etc.. downside that, if content ever added table-cell div, left border cutting off 1px.

css google-chrome html-table css-tables