Prevent the lower div from moving when the upper vert scroll

I'm doing an application in angular that is not responsive because you would have to do calculations to redraw. My knowledge of css is very limited, and my problem is that I have the div that loads the tree, that makes vertical scroll if many nodes of the tree are loaded, on top of a control bar. I have calculated the widths and height of the divs in the component.ts and they are loaded in the ngAfterViewInit (). I leave the code of my component.html (the styles go in the html) and the photo of what happens.

<app-navbar-geochem></app-navbar-geochem>

<div id="parent" style="display: inline-flex" #parent class="pariente">

<div #tree style="overflow: scroll;border:2px solid black">
<div style="width:220px;">

<tree-root [nodes]="nodes" class="tree-node-leaf" #arbol>
  <ng-template #treeNodeTemplate let-node="node" let-index="index" >
          <input *ngIf="mostrar <= 0"
            (change)="check(node, !node.data.checked)"
            type="checkbox"
            [indeterminate]="node.data.indeterminate"
            [checked]="node.data.checked"
            >

            {{ node.data.name }}
     </ng-template>
   </tree-root>
  </div>
</div>

<div>
  <canvas #canvas id="canvas" style="overflow-y:scroll;border:2px solid 
   black">
   Tu navegador no soporta canvas.
</canvas>
</div>


</div>

<div class="menu-inferior" #menu style="display: inline-flex;border:2px 
 solid black;margin-top:-8px">
    <button class="btn btn-success btn-block" #recargar2>RECARGAR</button>
    <p><b>LÍMITES</b></p>
    <div  *ngFor="let limiteX of limitesX; let i=index" style="padding-
    left:3px">
      <b>x</b>{{i}}. <input type="text" placeholder="{{  limiteX  }}" 
                      size="1">
  </div>
  <div  *ngFor="let limiteY of limitesY; let i=index" style="padding-
         left:3px">
      <b>y</b>{{i}}. <input type="text" placeholder="{{  limiteY  }}" 
                      size="1">
    </div>
</div>

* I found the problem. It is because the tree-node is loaded with an external library ( library tree ), which generates a div by js I believe, and it is this that expands. The solution maybe to apply a dynamic and negative margin-top to the lower content. * It is not a very elegant solution. To apply it, the only thing that has occurred to me is to create a setInterval function. It works fine, with the only drawback that when regrouping the nodes, for a fraction of a second, the text sneaks up, until the setInterval resets its margin to 0. I had to put the bar up and leave space to avoid effects unwanted.

setInterval(
    function() {
      GeochemComponent.tamtree=GeochemComponent.arbolicodeloshuevos[0].clientHeight;
      if (GeochemComponent.tamtree>yWTree) {
        GeochemComponent.debajo.style.marginTop=- (GeochemComponent.tamtree-yWTree)+'px';
      }
      if ((GeochemComponent.tamtree-yWTree)<0) {
        GeochemComponent.debajo.style.marginTop=0+'px';
      }


    },
    10);