How to restrict @deckdeckgo div go outside of his parent or get biiger than his parent

Question

Hello I am using a very simple cdn it's deckdeckgo Drag, Resize and Rotate => https://docs.deckdeckgo.com/components/drr/ everything is working fine except 2 things

1. My deckgo-drr child gets bigger than his parent
2. My deckgo-drr child can move outside of parent if we move it to the top right corner and then scale/resize it dragging from top right corner (it's working on any corner)

Here is my code

#parent {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 2px solid blue;
  margin: 100px;
}

<script type="module" src="https://unpkg.com/@deckdeckgo/drag-resize-rotate@latest/dist/deckdeckgo-drag-resize-rotate/deckdeckgo-drag-resize-rotate.esm.js"></script>

<div id="parent">

<deckgo-drr style="--width: 10%; --height: 10%; --top: 25%; --left: 10%;">
 <div style="background: green"></div>
</deckgo-drr>
  
  </div>

Here my problem