调整大小面板不显示在屏幕上-如何修复

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);
    });
  }