Auto resizing is not happening on vue 3

[rajeshwarpatlolla]

Software version (please complete the following information):

• Browser [e.g. chrome, safari]
• Vue Version ^3.2.25
• vue-grid-layout Version: ^3.0.0-beta1

Describe the bug When we are adding the items dynamically to the vue grid layout, it's not resizing itself unless we manually drag the newly added item.

To Reproduce Steps to reproduce the behavior:

1. Add a new item dynamically through the code.
2. Now we will see that the items is added but the background container sill has old height only
3. Now drag the newly added item a little, so that the background container will also resize and fit the newly added item

Expected behavior It should resize itself when we add a new item

[Kainar9292]

I have the same problem

[danrvc]

Same here

[JohnsonSii]

But, how to solve this problem???

[AbdulKadirKhann]

Facing the same issue

[cryptoprof]

Works, when wrap grid-layout component with div(using tailwind)

    <div class="mt-5 overflow-x-auto min-h-full">
      <grid-layout
        v-model:layout="layout"
        :col-num="colNum"
        :row-height="30"
        :is-draggable="true"
        :is-resizable="true"
        :vertical-compact="true"
        :use-css-transforms="true"
      >
        <grid-item
          v-for="item in layout"
          :key="item.i"
          class="bg-white dark:bg-darkmode-600 dark:border-darkmode-300 rounded"
          :x="item.x"
          :y="item.y"
          :w="item.w"
          :h="item.h"
          :i="item.i"
        >
          <span class="text">{{ item.i }}</span>
          <span
            class="remove"
            @click="removeItem(item.i)"
          >x</span>
        </grid-item>
      </grid-layout>
    </div>