Неправильно высчитывается высота правого блока

Мне нужна ваша помощь. Я имею небольшую разметку в своем приложении, вот пример на картинке как выглядит приложение

У меня оно работает следующим образом: я могу делать resize нижнего my-buttom-properties-panel-container блока вверх и вниз, а правого my-properties-panelблока влево-вправо. Если у меня увеличивается footer, то правая часть у меня уменьшается и наоборот.

Эта логика работает хорошо, но не идеально. Проблема в том, что с самого начала bottomLeftTabsCnt и bottomRightTabsCnt у нас false оба. Контент правой части my-properties-panel отображается хорошо. Однако когда у нас одно из условий становится true, у нас появляется блок my-buttom-properties-panel-container, который имеет высоту. Соответственно, высота my-properties-panel уменьшилась и контент этого блока плохо показывается из-за неправильного вычитания высоты. Чтобы контент my-properties-panel вычислялся хорошо надо сделать resize вверх или вниз блока my-buttom-properties-panel-container.

Скажите, пожалуйста, как это поправимо? Спасибо!

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" #all_bottom_tabs>
      <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>

typescript

@ViewChild('all_bottom_tabs', { static: false }) tabContainer: ElementRef;

get bottomRightTabsCnt(): boolean{
   return document.querySelector("#my-properties-panel-div-buttom-right-id > tabset > ul > li") ? true : false;
}


get bottomLeftTabsCnt(): boolean{
   return document.querySelector("#my-properties-panel-div-buttom-id > tabset > ul > li") ? true : false;
}

buttomStyle: any = {  };
sizeButtomChange: EventEmitter<any> = new EventEmitter();

style:any = {  };
sizeChange: EventEmitter<any> = new EventEmitter();

resizing = false;
resizeDirection = '';
bpp: any;

headerHeight: number;

ngOnInit(): void {
   this.style.maxHeight = `calc(100% - 150px)`

   this.headerHeight = (document.querySelector("#header > div") as any)?.offsetHeight ?? 0;

   this.bpp = document.getElementById('my-buttom-properties-panel-div-id');
   this.renderer.setStyle(this.elRef.nativeElement.querySelector('.tab-content'), 'height', `${(this.bpp.getBoundingClientRect().y - 95 - this.headerHeight)}px`);
}

setupMutationObserver() {
   if (!this.tabContainer) {
     return;
   }

   this.observer = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {
          if (mutation.type === 'childList') {
            this.updateLayout();
          }
       });
   });

   this.observer.observe(this.tabContainer.nativeElement, {
     childList: true,
     subtree: true
   })
}

performResize = (event: MouseEvent) => {
   if (!this.resizing) return;
   if (this.resizeDirection === 'top') {
      let newHeight = window.innerHeight - event.clientY;
      newHeight = Math.max(150, newHeight);
      newHeight = Math.min(window.innerHeight * 0.85, newHeight);
      this.updateHeights(newHeight);
   } else if (this.resizeDirection === 'left') {
      const newWidth = window.innerWidth - event.clientX;
      this.updateWidths(newWidth);
 }

 updateHeights(newHeight: number) {
   this.buttomStyle = { height: `${newHeight}px` };
   this.style.height = `calc(100vh - ${this.buttomStyle['height']}px)`;
   this.sizeButtomChange.emit(this.buttomStyle);
   this.updateLayout();
 }

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

 updateLayout() {
   const bottomHeight = this.bottomRightTabsCnt || this.bottomLeftTabsCnt ? parseInt(this.buttomStyle['height'], 10) : 0;
   this.style.maxHeight = `calc(100% - ${bottomHeight}px)`;  

   this.sizeChange.emit(this.style);
 }


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

app-properties-panel

ngOnInit(): void {
this.headerHeight = (document.querySelector("#header > div") as any)?.offsetHeight ?? 0;

const bpp = document.getElementById('my-buttom-properties-panel-div-id');
this.resizeService.addResizeEventListener(bpp, () => {
    this.height = `${(bpp.getBoundingClientRect().y - 50 - this.headerHeight)}px`;
    if(this.hostMaxHeight != this.height){
      this.hostMaxHeight = this.height;
      this.renderer.setStyle(this.elRef.nativeElement.querySelector('.tab-content'), 'height', `${(bpp.getBoundingClientRect().y - 95 - this.headerHeight)}px`);
      // tabset
      this.renderer.listen(this.elRef.nativeElement.querySelector('.nav-tabs'), 'wheel', (evt) => {
        evt.preventDefault();
        this.elRef.nativeElement.querySelector('.nav-tabs').scrollLeft += evt.deltaY / 2;
      })
      this.propEvents.rightMaxHeightChange.next((bpp.getBoundingClientRect().y - 95 - this.headerHeight))
    }
  }
)
}