Панель Resize выходит за пределы экрана - как исправить

Question

Я изменил размер компонента, он работает между двумя компонентами, он работает, но, если я изменяю размер к правой стороне, он будет бесконечно исчезать с экрана с правой стороны.

Для компонента левой стороныя сделал минимальную ширину, чтобы она не уменьшалась по сравнению с минимальной шириной.Но то же самое не работает для правой стороны.

Пожалуйста, помогите мне с исправлением.

<comp1 id="location-dmps-list" class="location-dmps-list" (dmpDetailsDataEvent)="dmpDetailsChanged($event)" (dmpMultiSelectsChanged)="dmpMultiSelectsChangedFn($event)"></comp1>
<resize-panel (onResize)="onResize($event)"></resize-panel>
<comp2 class="location-dmps-details" [dmpdetailsData]="dmpdetailsData" [showBlurDMPDetails]="dmpMultiSelectsChanged"></comp2>

ts код

@Output() onResize = new EventEmitter();
  startX: number;
  endX: number;
  underDrag: Boolean = false;

  constructor() { }
  ngOnInit() {
  }

  @HostListener('mousedown', ['$event']) onMouseDown($event) {
    this.startX = $event.clientX;
    const mouseMoveFunction = (event) => {
      console.log(this, ' at resize');
      this.endX = event.clientX;
      const moveDiff = this.endX - this.startX;
      this.startX = this.endX;
      this.onResize.emit(moveDiff);
    };
    document.addEventListener('mousemove', mouseMoveFunction);

    document.addEventListener('mouseup', function () {
      document.removeEventListener('mousemove', mouseMoveFunction);
    });
  }