Can't wrap the contents of ag-grid Row - html

Question

I'm trying to wrap contents of a row of ag-grid into multiple lines but I can't get the contents to display over multiple lines. The data for rows is provided dynamically at the time of certain condition check.
I have tried using the white-space:normal property but it didn't do anything.
I also tried wrap-text but it is not a valid property.
Here's my code for reference.
component.ts
columnDefs = [
{headerName: 'S.No.', field : 'SNo'},
{headerName: 'Error Description', field: 'Error_Description', autoHeight: true},
]
rowData = []
provide data to rows
for(let i = 0; i<this.validationErrors.length;i++){
let errorObj={};
errorObj["SNo"]=i+1;
errorObj["Error_Description"]=this.validationErrors[i];
this.rowData=[...this.rowData, errorObj]
}
And here is a snapshot of the display
index.html
As you can see in the image, the AZAAAAAA.... part is overflowing. The following is the css that is applied to the cell implicitly.
style.css
.ag-cell {
display: inline-block;
overflow: hidden;
position: absolute;
text-overflow: initial;
white-space: inherit;
}
If I try to alter the text-overflow property to initial or if I try to change the white-space to normal, it clips the entire AZAAA... part.
How do I resolve this?
Note: I'm not using any of the APIs to handle rows or columns. I have just defined 2 arrays and bound them to the html as follows:
<ag-grid-angular [hidden]="isValid" class="ag-theme-balham" [rowData]="rowData" [columnDefs]="columnDefs">
<!-- Show table -->
</ag-grid-angular>