CSS position wrong when update text on textarea
<p>I have a problem about element position when textarea text length change.</p>

<p>HTML:</p>

<pre><code>&lt;body&gt;
    &lt;div class="container"&gt;
        &lt;div class="child"&gt;
            &lt;div class="bar"&gt;
                &lt;textarea&gt;&lt;/textarea&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p>The <strong>container</strong> div have position is relative and contain <strong>child</strong> div have position is absolute, in the child div contain a element have position absolute also.</p>

<p>CSS:</p>

<pre><code>* {
    margin: 0; padding: 0;
    box-sizing: border-box;
}
.container {
    position: relative;
    width: 800px;
    height: 500px;
    overflow: hidden;
    margin: 0 auto
}

.child {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px solid #000;
}

.bar {
    position: absolute;
    left: 780px;
    top: 50px;
    height: 30px;
    border: 1px solid #000;
}

.bar textarea {
    position: absolute;
    left: 0;
    top: 0
}
</code></pre>

<p>I have add a event to textarea element:</p>

<pre><code>&lt;script type="text/javascript"&gt;
    $(document).ready(function () {
        $('textarea').keyup(function () {
            $(this).parent().width($(this).width() + 1);
        });
    });
&lt;/script&gt;
</code></pre>

<p>When I input text into textarea, if text have length overcome the <strong>container</strong>, the child element will have wrong position although the actually position not change.</p>

<p>Before input:
<a href="https://i.stack.imgur.com/h93on.png" rel="nofollow noreferrer">The textarea position before input image</a></p>

<p>After input:
<a href="https://i.stack.imgur.com/8SGfB.png" rel="nofollow noreferrer">The textarea position after input image</a></p>