I need your help. I have a markup that consists of two parts: the bottom part my-bottom-properties-panel-container and the right part my-properties-panel. They are always attached to the bottom and to the right, and each of these parts has a resize functionality – we can increase or decrease the height of the lower block and the width of the right one. The right part of my-properties-panel is above the bottom, and if we increase the height of my-bottom-properties-panel-container, the height of my-properties-panel decreases and vice versa.

Now the problem is that if we resize the bottom part or change the 'display' condition : bottomLeftTabsCnt || bottomRightTabsCnt ? 'flex' : 'none' then the height of my-properties-panel is not calculated and the content is displayed incorrectly. The height of my-properties-panel should always be the full available height of the content, including the height of the bottom block.

enter image description here

Where exactly do I have a problem? Thank you very much

Typescript

startResizing(event: MouseEvent, direction: string) {
    this.resizing = true;
    this.resizeDirection = direction;
    event.preventDefault();
    document.addEventListener('mousemove', this.performResize);
    document.addEventListener('mouseup', this.stopResizing);
  }

  performResize = (event: MouseEvent) => {
    if (!this.resizing) return;

    let newHeight = window.innerHeight - event.clientY;
    newHeight = Math.max(150, newHeight);
    newHeight = Math.min(window.innerHeight * 0.85, newHeight);

    if (this.resizeDirection === 'top') {
      this.updateHeights(newHeight);
    } else if (this.resizeDirection === 'left') {
      const newWidth = window.innerWidth - event.clientX;
      this.updateWidths(newWidth);
    }

    this.updateLayout();
  }

  updateHeights(newHeight: number) {
    this.buttomStyle = { height: `${newHeight}px` };
    this.style.maxHeight = `calc(100% - ${newHeight}px)`;
    this.updateLayout();
    this.sizeButtomChange.emit(this.buttomStyle);
    this.sizeChange.emit(this.style)
  }


  updateWidths(newWidth: number) {
    this.style.width = `${newWidth}px`;
    this.sizeChange.emit(this.style);
  }

  updateLayout() {
    if (this.bottomRightTabsCnt || this.bottomLeftTabsCnt) {
      this.style.maxHeight = `calc(100% - ${this.buttomStyle['height']}px)`;
    } else {
      this.style.maxHeight = '100%';
    }
    this.sizeChange.emit(this.style);
  }


  stopResizing = () => {
    this.resizing = false;
    document.removeEventListener('mousemove', this.performResize);
    document.removeEventListener('mouseup', this.stopResizing);
  }

html

<div class="my-properties-panel" id="my-properties-panel-div-id" [ngStyle]="style">
    <div class="resize-handle-left" (mousedown)="startResizing($event, 'left')"></div>
    <app-properties-panel
            style="min-width: 400px;"
            [sizeChange]="sizeChange">
    </app-properties-panel>
</div>

<div class="my-buttom-properties-panel-container"
     [ngStyle]="{
         buttomStyle,
            'display' : bottomLeftTabsCnt || bottomRightTabsCnt ? 'flex' : 'none',
         }"
>
    <div class="resize-handle-top" (mousedown)="startResizing($event, 'top')"></div>
    <div class="my-buttom-properties-panel d-flex w-100" id="my-buttom-properties-panel-div-id" [ngStyle]="buttomStyle">
        <div [ngClass]="{'w-50': bottomRightTabsCnt, 'w-100': !bottomRightTabsCnt}">
            <app-properties-panel-buttom
                    id="my-properties-panel-div-buttom-id"
                    [sizeButtomChange]="sizeButtomChange">
            </app-properties-panel-buttom>
        </div>
        <div [ngClass]="{'w-50': bottomRightTabsCnt, 'w-0': bottomRightTabsCnt}">
            <app-properties-panel-buttom-right
                    id="my-properties-panel-div-buttom-right-id"
                    [sizeButtomChange]="sizeButtomChange"
            ></app-properties-panel-buttom-right>
        </div>
    </div>

</div>

Scss

.resize-handle-top, .resize-handle-left {
  position: absolute;
  background-color: rgba(243, 243, 243, 1);
  border: 2px;
}

.resize-handle-top {
  cursor: row-resize;
  width: 100%;
  height: 3px;
  bottom: 100%;
  left: 0;
  z-index: 30;
  margin-bottom: 2px;
}

.resize-handle-left {
  width: 3px;
  left: -5px;
  top: 0;
  bottom: 2px;
  cursor: ew-resize;
}

.my-properties-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 400px;
  min-width: 400px;
  z-index: 10;
  border-left: 1px solid rgba(204, 204, 204, 0);
  background-color: #fffffff0;
}

.my-buttom-properties-panel-container {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  z-index: 10;

  .my-buttom-properties-panel-div-id {
    display: flex;
  }
}