title: Measuring overflow is incorrect in Vue
body: <p>I'm trying to make a overflow with tagging, which fades out in the beginning to give the user a hint that there's more. This is what it looks like:</p>
  <p><a href="https://i.stack.imgur.com/fXGBR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fXGBR.png" alt="Almost finished tagsinput full with tags with fading tags at the beginning" /></a></p>
  <p>I put the fading gradient as a <code>:after</code> inside the CSS and &quot;activate&quot; it by Vue's <a href="https://v2.vuejs.org/v2/guide/class-and-style.html" rel="nofollow noreferrer">style binding</a>, when <code>scrollWidth &gt; offsetWidth</code> (overflow bigger than the box itself).</p>
  <p>But the problem is that it sometimes (lags?) behind and does not calculate the scrollWidth right, especially when I enter a long word and then delete it. It doesn't &quot;like&quot; that and it says that the overflow is false, but there's no tag in the box. Basically this happens:
  <a href="https://i.stack.imgur.com/yVhhd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yVhhd.png" alt="Calc reports wrong and text is fading at the beginning, but there's no overflow happening" /></a></p>
  <p>I tried to put the calculation inside this <code>$nextTick()</code>, but it didn't solve the issue. I also tried using Vue's <code>keyDown</code>, <code>keyUp</code> and <code>keyPress</code> listeners, but nothing solved this also.</p>
  <p>This (also on <a href="https://codepen.io/anon/pen/BMmaxw" rel="nofollow noreferrer">CodePen</a>) demonstrates the issue:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>new Vue({
    el: '#tagsinput',
    data: {
      input_value: "",
      tags: []
    },
    methods: {
      addTag: function() {
        if (this.input_value &gt; "") {
          this.tags.push(this.input_value)
          this.input_value = "";
  
          // Refocus the text input, so it stays at the end
          this.$refs.input.blur();
          this.$nextTick(function() {
            this.$refs.input.focus();
          })
  
        }
      },
      deleteTag: function() {
        if (this.input_value == "") {
          this.tags.pop()
        }
      }
    }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.outter {
    border: 1px solid red;
    width: 250px;
    overflow: hidden;
    display: flex;
  }
  
  .inner {
    border: 1px solid blue;
    margin: 2px;
    display: flex;
  }
  
  .tag {
    border: 1px solid black;
    margin: 2px;
  }
  
  input {
    min-width: 80px;
    width: 80px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.2/vue.min.js"&gt;&lt;/script&gt;
  &lt;div id="tagsinput"&gt;
    &lt;div class="outter" ref="outter"&gt;
      &lt;div class="inner" ref="inner"&gt;
        &lt;div class="tag" v-for="tag in tags"&gt;{{tag}}&lt;/div&gt;&lt;input type="text" v-model="input_value" @keydown.enter="addTag" @keydown.delete="deleteTag"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    Outter div scrollwidth: {{ $refs.outter ? $refs.outter.scrollWidth : null }}&lt;br&gt; Outter div offsetWidth: {{ $refs.outter ? $refs.outter.offsetWidth : null }}&lt;br&gt;
    &lt;br&gt; Is overflowing: {{ ($refs.outter ? $refs.outter.scrollWidth : null) &gt; ($refs.outter ?$refs.outter.offsetWidth : null) }}
  &lt;/div&gt;
  &lt;br&gt;&lt;br&gt; Type a really long word in, add and then delete it. "Is overflowing" will be the inverse, until you press Backspace &lt;b&gt;again&lt;/b&gt;.</code></pre>
  </div>
  </div>
  </p>
  <p>Any help is greatly appreciated.</p>