Having an issue with my ngx datatable row details. Everything works well initially, but when I adjust the browser width, the details don't scale properly with rows and columns. They seem to have a fixed width that was set when the page was first loaded. Any suggestions on how to fix this?
https://i.stack.imgur.com/UJaoq.png
https://i.stack.imgur.com/VSMvj.png
https://i.stack.imgur.com/JjVpd.png
<ngx-datatable
#myTable
class="material"
[columnMode]="'flex'"
[headerHeight]="50"
[footerHeight]="50"
[rowHeight]="'auto'"
[rows]="details">
<ngx-datatable-row-detail [rowHeight]="100" #myDetailRow (toggle)="onDetailToggle($event)" flex>
<ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template >
<div style="padding-left:35px;">
<div><strong>Address Address Address Address Address AddressAddressAddress Address Address Address Address Address</strong></div>
</div>
</ng-template>
</ngx-datatable-row-detail>
<ngx-datatable-column name="Name" [flexGrow]="1">
<ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template>
<a
[class.datatable-icon-right]="!expanded"
[class.datatable-icon-down]="expanded"
title="Expand/Collapse Row"
(click)="toggleExpandRow(row)">aaa
</a>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Name" [flexGrow]="1">
<ng-template let-row="row" ngx-datatable-cell-template>
testing 3
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Gender" [flexGrow]="5">
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
testing
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Age" [flexGrow]="5">
<ng-template let-row="row" ngx-datatable-cell-template>
testingsecond
</ng-template>
</ngx-datatable-column>
</ngx-datatable>