Как сделать так, чтобы родительский узел принимал высоту всех дочерних элементов при использовании angular рекурсивного шаблона для n-арного дерева?

Question

Я использую angular рекурсивный шаблон для представления n-арного дерева. Мне нужно, чтобы каждый родительский узел принимал рост своих дочерних элементов, но пока безуспешно. Возможно, мне не хватает чего-то очень простого, а опытные разработчики найдут это действительно легким.

Заранее благодарен за любую помощь всем вам.

Это шаблон вопроса:

<table>
    <ng-template cdkDropListGroup #recursiveList let-tree>
         <div cdkDropList (cdkDropListDropped)="drop($event)">
              <div [cdkDragData]=node *ngFor="let node of tree; let i=index " cdkDrag>
                  <tr>
                     <app-default-node [node]="node"></app-default-node>
                         <td *ngIf="node.children!==null && node.children.length > 0" cdkDrag>
                             <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: node.children }"></ng-container>
                         </td>
                  </tr>
               </div>
         </div>
     </ng-template>
</table>
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: tree }"></ng-container>

Мой вопрос заключается в том, как добиться этого с помощью чистого CSS?

. Это изображение текущего дизайна и того, что мне нужно достичь: