Correctly size and resize component inside gridstackjs panel

Question

Noob here.
jqxgrid component inside gridstackjs panel.
Looking for the grid with the initial size of the panel and then resize accordingly to the panel resize. In case of grid bigger than panel, show grid scrollbars, not panel scrollbars.
Setting grid height/width at 100% not working: grid and panel scrollbars appear and horizontal scrollbar of the grid never apperar.
Any suggestion?

$(document).ready(function() {
  const gridstack = GridStack.init({
    cellHeight: 100,
    resizable: {
      handles: 'se, s, e'
    }
  });

  const data = [{
      id: 1,
      firstName: "Mario",
      lastName: "Rossi",
      age: 30
    },
    {
      id: 2,
      firstName: "Luca",
      lastName: "Bianchi",
      age: 25
    },
    {
      id: 3,
      firstName: "Giulia",
      lastName: "Verdi",
      age: 35
    },
    {
      id: 4,
      firstName: "Giulia",
      lastName: "Verdi",
      age: 35
    },
    {
      id: 5,
      firstName: "Giulia",
      lastName: "Verdi",
      age: 35
    },
    {
      id: 6,
      firstName: "Giulia",
      lastName: "Verdi",
      age: 35
    },
    {
      id: 7,
      firstName: "Giulia",
      lastName: "Verdi",
      age: 35
    },
    {
      id: 8,
      firstName: "Giulia",
      lastName: "Verdi",
      age: 35
    },
    {
      id: 9,
      firstName: "Giulia",
      lastName: "Verdi",
      age: 35
    },
    {
      id: 10,
      firstName: "Giulia",
      lastName: "Verdi",
      age: 35
    },
    {
      id: 11,
      firstName: "Giulia",
      lastName: "Verdi",
      age: 35
    },
    {
      id: 12,
      firstName: "Giulia",
      lastName: "Verdi",
      age: 35
    },
    {
      id: 13,
      firstName: "Giulia",
      lastName: "Verdi",
      age: 35
    }
  ];

  const source = {
    localdata: data,
    datatype: "array",
    datafields: [{
        name: 'id',
        type: 'number'
      },
      {
        name: 'firstName',
        type: 'string'
      },
      {
        name: 'lastName',
        type: 'string'
      },
      {
        name: 'age',
        type: 'number'
      }
    ]
  };

  const dataAdapter = new $.jqx.dataAdapter(source);

  function initGrid(selector) {
    $(selector).jqxGrid({
      width: '100%',
      height: '100%',
      source: dataAdapter,
      columns: [{
          text: 'ID',
          datafield: 'id',
          width: '20%'
        },
        {
          text: 'Name',
          datafield: 'firstName',
          width: '40%'
        },
        {
          text: 'LastName',
          datafield: 'lastName',
          width: '40%'
        }
      ]
    });
  }

  initGrid("#grid1");
  initGrid("#grid2");
  initGrid("#grid3");

  gridstack.on('resizestop', function(event, el) {
    const $grid = $(el).find('.jqx-grid');
    if ($grid.length) {
      $grid.jqxGrid('width', $(el).width());
      $grid.jqxGrid('height', $(el).height());
    }
  });
});

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.grid-stack-item-content {
  background: #f4f4f4;
  border: 1px solid #ccc;
  overflow: hidden;
}

.jqx-grid {
  width: 100%;
  height: 100%;
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@11.1.1/dist/gridstack.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.1.1/gridstack-all.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/14.0.0/jqwidgets/styles/jqx.base.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/14.0.0/jqwidgets/jqxcore.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/14.0.0/jqwidgets/jqxbuttons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/14.0.0/jqwidgets/jqxscrollbar.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/14.0.0/jqwidgets/jqxgrid.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/14.0.0/jqwidgets/jqxgrid.selection.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/14.0.0/jqwidgets/jqxdata.js"></script>



<div class="grid-stack">
  <div class="grid-stack-item" gs-x="0" gs-y="0" gs-w="4" gs-h="4">
    <div class="grid-stack-item-content">
      <div id="grid1" class="jqx-grid"></div>
    </div>
  </div>
  <div class="grid-stack-item" gs-x="4" gs-y="0" gs-w="4" gs-h="4">
    <div class="grid-stack-item-content">
      <div id="grid2" class="jqx-grid"></div>
    </div>
  </div>
  <div class="grid-stack-item" gs-x="8" gs-y="0" gs-w="4" gs-h="4">
    <div class="grid-stack-item-content">
      <div id="grid3" class="jqx-grid"></div>
    </div>
  </div>
</div>

Thanks
DPZ