Can not fixed girdlayout height?

[lp20010415]

Software version (please complete the following information):

• Browser : chrome
• Vue Version: 2.6.10
• vue-grid-layout Version: 2.4.0

Describe the bug Please refer to the GIF image

Items that move beyond the range will experience offset

My code is

<template>
  <div class="main-content">
    <div class="tab-left" 
      :style="{ height: innerHeight - 110 + 'px', width: innerWidth * 0.2 + 'px',}">
      <grid-layout
        class="content-grid-layout"
        :style="{ height: innerHeight - 110 + 'px'}"
        :layout.sync="layout"
        :maxRows="5"
        :col-num="1"
        :row-height="layout.length * 20"
        :row-width="1"
        :is-draggable="true"
        :is-resizable="false"
        :vertical-compact="false"
        :use-css-transforms="true"
        :autoSize="false"
      >
        <grid-item v-for="(item, k) in layout"
          class="content-grid-layout-item"
          @move="moveEvent"
          :x="0" :y="item.y" :w="item.w" :h="item.h" :i="item.i" :key="item.i">

          {{ item.i }}
        </grid-item>
      </grid-layout>

      <div class="tab-left-action">
        <el-button>添加模块</el-button>
      </div>
    </div>

  </div>
</template>
<script>
import draggable from 'vuedraggable';
import VueGridLayout from 'vue-grid-layout'
export default {
  components: {
    draggable,
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem
  },
  data() {
    return {
      innerHeight: null,
      innerWidth: null,
      layout: [
        {"x": 0, "y": 0, "w": 1, "h": 1, "i": "0"},
        {"x": 0, "y": 1, "w": 1, "h": 1, "i": "3"},
        {"x": 0, "y": 2, "w": 1, "h": 1, "i": "2"},
        {"x": 0, "y": 3, "w": 1, "h": 1, "i": "1"},
        {"x": 0, "y": 4, "w": 1, "h": 1, "i": "4"},
        {"x": 0, "y": 5, "w": 1, "h": 1, "i": "5"},
      ],
    }
  },
  created() {
    this.innerHeight = window.innerHeight;
    this.innerWidth = window.innerWidth;
  },
  methods: {
    moveEvent(i, newX, newY) {
      console.log("MOVED i=" + i + "x=" + newX + "Y=" + newY)
    }
  }
}
</script>
<style lang="scss" scoped>
.main-content {
  padding: 10px;
  height: 100%;
  .tab-left {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid lightgray;
    box-shadow: 1px 1px 1px 1px lightgray;
    border-radius: 5px;
    .content-grid-layout {
      // overflow: scroll;
      overflow-x: hidden;
      scrollbar-width: 2px;
      width: 100%;
      height: 100%;

      .content-grid-layout-item {
        box-shadow: 0.5px 1px 1px 1px lightgray;
      }
    }

    .content-grid-layout::-webkit-scrollbar {
      width: 5px;
    }

    .content-grid-layout::-webkit-scrollbar-thumb {
      background-color: #888;
    }

    .content-grid-layout::-webkit-scrollbar-track {
      background-color: #F1F1F1;
    }

    .content-grid-layout::-webkit-scrollbar-thumb:hover {
      background-color: #555;
    }

    .tab-left-action {
      width: 100%;
      height: 10%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>

Thanks for your reply!

[lp20010415]

Should griditem be calculated based on its x and y axis coordinates on the page? I think the code (vue-grid-llayout. com mon. js) will retrieve the x and y axis calculations of its parent

[lp20010415]

I set isBounded is 'true' in the gridlayout, it can make scrollbar move, but when griditem move the top, it can.