Transformed children contains strange parent width
<p>I've got a simple HTML Markup:</p>

<pre><code>&lt;div class="parent"&gt;
    &lt;div class="child"&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>The child element is moved by <code>transform: translate(-100%);</code> out of the viewport but the parent width does not move with the child element:</p>

<p>This is my simplified CSS:</p>

<pre><code>.parent {
    position: fixed;
    top: 20%;
    left: 0;
}

.parent .child {
    height: 300px;
    width: 500px;
    background: orange;
    transform: translate(-100%);
    -webkit-transform: translate(-100%);
    -moz-transform: translate(-100%);
    -o-transform: translate(-100%);
}
</code></pre>

<p>Have a look:</p>

<p><a href="https://i.stack.imgur.com/Ze6pQ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ze6pQ.jpg" alt="enter image description here"></a></p>