Unable to resize elements if the height and width of the element are set

I have a very unique use-case that I am unable to find a suitable solution for. I am recursively building a grid using angular. The grid is comprised of rows which contain columns (which contain a nested set of rows and columns and so forth). When a column contains a component, it is dynamically rendered and displayed on the screen resulting in a layout.

I need to find a way to make the rows and columns resizable. When I came across the “resize”: “vertical” and “horizontal” I thought it would solve my problem. However, when I load the layout from saved JSON, the sizes are fixed for each of the columns as the layout was already set. This means that the resize will not change the size of the elements as they have a height and width now.

Here is my recursive HTML:

 <div *ngIf="isScreenSelected" [ngClass]="nested ? 'nested-screen-container container' : 'screen-container container'" (click)="disableDefaults($event)">
    <div [ngClass]="getRowClass(nested, row.columns.length, last)"
         *ngFor="let row of screen.rows; let last = last">
      <div [ngClass]="getColumnClass(last)" *ngFor="let column of row.columns; let last = last;" (invoke)="setStyle(column.componentId, column.width, column.height)" cdkDropList
           [cdkDropListConnectedTo]="existingComponentIds"
           [id]="column.componentId"
           (cdkDropListDropped)="drop($event, column)">
        <app-fab-button-menu *ngIf="!column.componentInstance && !(column.nestedScreen.rows.length > 0) && !previewMode"
                             (addColumn)="addColumn(column)"
                             (addRow)="addRow(column)"></app-fab-button-menu>
        <app-page-design [isScreenSelected]="isScreenSelected"
                         [existingComponentIds]="existingComponentIds"
                         [previewMode]="previewMode"
                         [screen]="column.nestedScreen"
                         [nested]="true" cdkDragDropList
                         *ngIf="!column.componentInstance && column.nestedScreen.rows.length > 0"
                         (screenChanged)="onScreenChange()"
                         (functionalComponentAdded)="addFunctionalComponent($event)"></app-page-design>
        <div class="center" *ngIf="column.componentName">
          <app-functional
            [component]="column.componentInstance"
            [model]="column.componentModel"
            [id]="column.id"
            [style]="column.class"
            ></app-functional>
        </div>
      </div>
    </div>

And here is my style including the resize method.

.screen-container {
  background-color: #ffffff;
  width: 75%;
  margin-left: 12.5%;
  margin-top: 7%;
  height: 75%;
  z-index: 2;
  border: 1px solid #f0f0f0;
}

.nested-screen-container {
  background-color: #ffffff;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: flex;
  flex-direction: column;
}

.component-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.nested-column-border {
  border-style: dotted;
  border-left: hidden;
  border-top: hidden;
  border-bottom: hidden;
  padding-left: unset;
  padding-right: unset;
  border-color: darkgray;
  resize: horizontal !important;
  overflow-x: auto !important;
}

.nested-row-border {
  border-style: dotted;
  border-left: hidden;
  border-top: hidden;
  border-right: hidden;
  padding-left: unset;
  padding-right: unset;
  border-color: darkgray;
  resize: vertical !important;
  overflow-y: auto !important;
}

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
  padding-left: unset !important;
  padding-right: unset !important;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
  width: 100%;
  height: 100%;
}

.row {
  flex-wrap: unset !important;
}

.col {
  flex-basis: unset !important;
  flex-grow: unset !important;
  max-height: 100%;
  max-width: 100%;
}

.width-auto {
  width: auto;
  flex-grow: 1 !important;
}

.height-auto {
  flex-grow: 1 !important;
}

.half-height {
  height: 50%;
}

.width-half {
  width: 50%;
  min-width: 0;
}

.div {
  position: unset !important;
  left: unset !important;
}

.app-functional {
  cursor: pointer;
}

::ng-deep .mat-mdc-menu-content, .mat-mdc-menu-content .mat-mdc-menu-item .mat-mdc-menu-item-text {
  display: flex;
}

::ng-deep .mat-mdc-menu-item {
  padding: unset !important;

  min-height: unset !important;
}

::ng-deep .mat-mdc-menu-panel {
  min-width: unset !important;
}

::ng-deep .mat-mdc-menu-item .mat-icon {
  margin-right: 5px !important;
  margin: 5px;
}

::ng-deep .mat-mdc-menu-content {
  padding: unset !important;
  padding-left: 3px !important;
  padding-right: 3px !important;
}


.resizer {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;
  bottom: 0;
  right: 0;
  cursor: se-resize !important;
  z-index: 1000;
}

.resizable {
  position: relative;
  overflow: hidden;
}

TLDR; The long and the short of it is how can I resize: vertical or resize: horizontal for an element that already has a height set. I cannot use min/max-height either as it must be changed.