Felix A J Felix A J - 1 month ago 19
CSS Question

display:table div with percentage width 1px bug

The outer

div
have percentage width, and inner
div
's have
display: tabel; width: 100%
.

The inner
div
's show 1px less than outer
div
for some page widths while resizing. This adds an 1px line to the right.

enter image description here

https://jsfiddle.net/afelixj/utcswLp1/1/

Is there any fix for the bug?

Answer

This seems to be a specific webkit bug : https://bugs.webkit.org/show_bug.cgi?id=140371

The width of a display:table-* element is not always properly calculated when contained in a parent whose width is not defined with an absolute unit. You can see this issue in action here: Look at the right side of red elements

enter image description here


You can fix this issue in 2 different ways

  1. You could define the width of parent element with an absolute unit or
  2. You could apply display: table also to the container element. This doesn't really solve the bug but it should not be noticeable anymore (because it will affect also the parent element).