display:table div with percentage width 1px bug

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

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).

Your problem arises from the "60%" width of the container.

Chrome truncates decimals (300.5px will become 300px).
Therefore, when the inner div is set to "100%", it is calculated at the rounded width of the parent div

So, let's say that the outer div is 300.5px (60% of total).
The inner div is calulculated as 100% of 300px;

.wrap{
background: #000; 
height: 400px;
width: 60%;
display:inline-table;}

Just change your css code like this