Angular UI Grid - by applying Dynamic row height, collapse and expand column is not synchronizing with corresponding row

problem with expand collapse button- Using dynamic row height in angular UI-grid, each row takes height according to its content, but expand/collapse column is not aligned with corresponding row. My requirement is to get it aligned with its corresponding row. If that requirement is done the Grid will be intact with browser, when ever browser is resized. Any suggestion on how to get this to work? Thanks.

these are the styles i have used .ui-grid-cell-contents for content under each cell

.ui-grid-row, .ui-grid-cell 
  {
    height: auto !important;
  }

.ui-grid-row div[role=row] 
 {
    display: flex ;
    align-content: stretch;
 }

.ui-grid-viewport 
 {
    word-wrap: break-word;
    white-space: normal !important;
 }

.ui-grid-cell-contents 
 {
    padding:5px;
    box-sizing: border-box;
    font-size: 14px;
    display: flex;
    align-items: center;
    white-space:normal !important;
    word-wrap: break-word !important;
 }

rowHeight is specified 'auto' in GridOptions

$scope.productGridOptions = { data : 'Details',
rowHeight: 'auto', columnDefs : [ { }, . . . ]

};