gridstack.js issue with tall widget and short gridstack

Use this as a base for examples for gridstack.js issues.

by Alain Dumesny

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack-h5.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack.min.css">
<h1>gridstack.js base demo for issues</h1>
<p>Forked for an issue</p>
<br />

      <div class="toolbox" >
        <div class="grid-stack-item w1x1" gs-w="1" gs-h="1">
          <div class="grid-stack-item-content">1 x 1</div>
        </div>
        <div class="grid-stack-item w2x2" gs-w="2" gs-h="2" gs-min-h="2">
          <div class="grid-stack-item-content">2 x 2</div>
        </div>
      </div>

<br />
<br />
<div class="grid-stack"></div>
<br />
  <div class="trash"></div>

CSS

.grid-stack {
  background: lightgoldenrodyellow;
}

.grid-stack-item-content {
  color: #2c3e50;
  text-align: center;
  background-color: #18bc9c;
}

.w1x1 { width: 50px; height: 50px; margin-bottom: 10px; }
.w2x2 { width: 100px; height: 100px; margin-bottom: 10px; }

    .trash {
      height: 150px;
      background: rgba(255, 0, 0, 0.1) center center...

JavaScript

var options = { // put in gridstack options here
  disableOneColumnMode: true, // for jfiddle small window size
  float: true,
  column: 12,
  row: 1,
  removable: '.trash',
  cellHeight: 'auto',
  acceptWidgets: true,
  disableResize: true
};
var grid = GridStack.init(options);

GridStack.setupDragIn('.toolbox .grid-stack-item', { revert: 'invalid', scroll: false, appendTo: 'body', helper: myClone });

    function myClone(event) {
      var clone = event.target.cloneNode(true);
      return clone;
    }