Unexpected infinity scroll-X

[FreakyHead]

Hello, while x-scrolling got infinity scrolling and error in the console.

Tab in Tabs can be added and removed.
If I set the last tab is Active, the scroll width will be normal

<div class="flex">
      <vue-custom-scrollbar
        :settings="{ wheelPropagation: true }"
        tagname="div"
        class="flex overflow-x-scroll rounded-tl relative"
      >
        <div
          v-for="(tab, index) in tabs"
          :key="index"
          style="max-width: 200px;"
          :class="[
            'relative p-3',
            index === 0 ? 'rounded-tl' : '',
            tab.isActive ? 'bg-white' : 'bg-light-disabled',
          ]"
        >
          <h4
            @click="setActive(index)"
            class="cursor-pointer font-semibold text-md text-default"
          >
            ОСАГО
          </h4>
          <img
            v-if="tabs.length > 1"
            @click="removeTab(index)"
            :src="require('@/assets/icons/close.svg')"
            alt="Закрыть вкладку"
            class="absolute cursor-pointer"
            style="top: 10px; right: 10px;"
          />
          <p
            class="text-sm text-hint truncate"
            :title="tab.car.model ? tab.car.model : 'Новый расчет'"
          >
            {{ tab.car.model ? tab.car.model : 'Новый расчет' }}
          </p>
        </div>
      </vue-custom-scrollbar>

Details:

"vue": "^2.6.11",
"vue-custom-scrollbar": "^1.3.0"

[favoyang]

Happens to me, seems a bug of https://github.com/mdbootstrap/perfect-scrollbar.

Workaround: set suppressScrollX: true in settings.

[Binaryify]

please create issues in https://github.com/mdbootstrap/perfect-scrollbar.
@DeeDab @favoyang

[favoyang]

I just realize it's my mistake, not this library or the perfect-scrollbar. I have a fixed div with margin-left, but the width is still 100%. That makes the x-axis overflow. After adding a rule to limit the width with calc(100% - $left). It works.