Strange behavior of wide elements in Chrome, Safari?

Question

css

Noticed strange behavior in recent versions of Chrome and Safari on Mac.
If you create something like this:
<div style="background-color: #000; width: 167772px;">
1
<div style="background-color: #ccc; width: 100%;">
2
</div>
< /div>
then everything is fine, however, if the width of the parent is increased by at least 1 pixel (the initial width was chosen empirically, it is the same in both chrome and safari), then the background of the child elements is no longer painted in their own color.
In firefox, this behavior is not observed, in other browsers and platforms I have no way to check.
With what it can be connected and how to solve?

Answer 1

This may be due to browser restrictions on the maximum width.
Solution: don't use such long containers.

Answer 2

You have a good monitor, I'll tell you ...

Answer 3

hmm, the number strangely looks like 16,777,216 (2^24) divided by 100...