display: tabel; width: 100%
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
You can fix this issue in 2 different ways
display: tablealso 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).