display:table div with percentage width 1px bug

Question

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.

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

Is there any fix for the bug?

Dental

I am checking in chrome latest version. This happens for some browser widths only. – Dental

The same question has been asked many times and you can find the answer if you just google it. Take a look at this thread: #26205271 – Schooling

Answer 1

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

Aenneea

Answer 2

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;

Marchelle

Why it happens only for display: table, and not for display:block? – Dental

Because display:block will take up the entire space. It doesn't matter what the width is. Therefore, it is not calculated. And thus, not rounded. – Marchelle

Answer 3

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

Just change your css code like this

Adduction

Answer 4

@media screen and (-webkit-min-device-pixel-ratio:0) {
    width: calc(100% + 0.5px);
}

Notes:

• adding 1px doesn't fix the problem on WebKit … it just inverts it
• adding 0.5px introduces the problem on some non-WebKit browsers … wrapping it in a media query resolves this

Misteach

Answer 5

Change your display:table to display:block.

Personalism

I am searching for a solution for this bug. – Dental

Answer 6

I know this is rather late, but here's a fix for this bug i had to deal with too.

As mentioned in this thread the problem lies in the usage of percentage as a unit of width. The browser rounds the decimals down to a full number. So all we need to do is add 1 Pixel to the percentage based with. We can do that with calc:

width: calc(100% + 1px);

This will work in all major browsers exept IE 11 and older.

Backstairs

Note that calc does work on IE 11 for this use case (IE 11 has other issues with calc, but not in conjunction with width): caniuse.com/#search=calc – Blackfellow

Answer 7

The use of display: table can come with the unwanted side effect that table css styles are applied on the div. Therefore I chose display: contents for my project.

Hornstein