Ag Grid autoHeight and wrapText not working when using custom cellRenderer

Question

I'm trying to wrap the text of lengthy cell value. As per documentation setting autoHeight=true and wrapText=true working fine without cellRenderer components. But when using cellRendererFramework React component, seems not working. I tried to setting style inside custom cell renderer also not working. Any help would be greatly appreciated!

AgGrid component is as below,

<AgGridReact
    {...configs}
    onGridReady={onGridReady}
    masterDetail={true}
    suppressContextMenu
    detailCellRenderer='agCustomDetailTimelineRenderer'
    detailRowHeight={140}
    frameworkComponents={{
        agCustomRenderer: CustomRenderer,
    }}>
    {configs.columnDefs.map((columnDef) => (
        <AgGridColumn {...columnDef} />
    ))}
</AgGridReact>

Default column definition is,

defaultColDef: {
    sortable: true,
    filter: true,
    wrapText: true,
    autoHeight: true,
    menuTabs: ['filterMenuTab']
}

And my custom React component is,

import React from 'react';

const CustomRenderer = (props) => {
  return (
    <div
      style={{ height: '100%', whiteSpace: 'normal', wordBreak: 'break-all' }}>
      {props.value}
    </div>
  );
};

export default CustomRenderer;

Answer 1

For me it started working when also added fixed width, after adding below three properties to columnDef and then it started working for me

wrapText: true,
autoHeight: true,
width: 120