Cellmeasurer неправильно вычисляет окончательную высоту строки с высотой изображения и кнопками действий

Question

Визуализация реактивно-виртуализированного списка, который может содержать строки только с текстом, текстом + изображениями, текстом + изображениями с некоторыми кнопками действий. Проблема, с которой я сталкиваюсь, заключается в том, что, когда я фиксирую ширину изображения (переменную высоту) и включаю кнопки действий, клеточный измеритель неправильно вычисляет высоту, а последующие строки перекрывают изображение и кнопки действий.

(Задание фиксированной ширины и автоматической высоты, чтобы соотношение сторон изображения сохранялось, а строки визуально выглядели равномерно.

1. Фиксирование высоты изображения до 150px вместо фиксированной ширины и автоматической высоты в .detailsImage в style.js. Это показывает изображение правильно. Но actionContainer все еще идет ниже следующего ряда.
2. Установка высоты для actionsContainer в style.js не помогает.
3. Использование "Align-text": "right" для actionsContainer в style.js вместо float.
4. установка разных стилей в стиле prop для autosizer.

Полный код / ​​демо: https://codesandbox.io/s/crazy-dust-ehhmz?fontsize=14

import {
  List,
  AutoSizer,
  CellMeasurer,
  CellMeasurerCache
} from "react-virtualized";

/**
 * Generic variable size, virtualized list that can be used for showing
 * any item. Eg. activities, published and scheduled posts etc.
 */

export class ActivitiesList extends React.PureComponent {
  constructor(props) {
    super(props);
    this.cache = new CellMeasurerCache({
      defaultHeight: this.props.defaultRowHeight,
      minHeight: this.props.rowMinHeight,
      fixedWidth: true
    });
  }

  RowRenderer = ({ index, key, isScrolling, isVisible, style, parent }) => (
    <CellMeasurer
      cache={this.cache}
      columnIndex={0}
      key={key}
      parent={parent}
      rowIndex={index}
    >
      <div key={key} style={style}>
        {this.props.rowRenderer(
          isScrolling,
          isVisible,
          this.props.items[index]
        )}
      </div>
    </CellMeasurer>
  );

  render() {
    return (
      <AutoSizer>
        {({ width, height }) => {
          const { cache } = this;
          const { style, className, overscanRowCount } = this.props;

          return (
            <List
              deferredMeasurementCache={cache}
              rowCount={this.props.items.length}
              width={width}
              height={height}
              rowHeight={cache.rowHeight}
              rowRenderer={this.RowRenderer}
              {...{
                style,
                overscanRowCount,
                className
              }}
            />
          );
        }}
      </AutoSizer>
    );
  }
}

ActivitiesList.propTypes = {
  /**
   * Array of items to be rendered.
   */
  items: PropTypes.arrayOf(PropTypes.object).isRequired,
  /**
   * Responsible for rendering a row item.
   */
  rowRenderer: PropTypes.func.isRequired,
  /**
   * Custom inline style for list element.
   */
  style: PropTypes.objectOf(PropTypes.any).isRequired,
  /**
   * Custom CSS class name to attach to List element.
   */
  className: PropTypes.string.isRequired,
  /**
   * Number of rows to render above/below the visible bounds of the list.
   * This can help reduce flickering during scrolling.
   */
  overscanRowCount: PropTypes.number.isRequired,
  /**
   * Unmeasured cells will initially report this height
   */
  defaultRowHeight: PropTypes.number,
  /**
   * Minimum height to use if cell measurer computes a lesser height.
   */
  rowMinHeight: PropTypes.number
};

ActivitiesList.defaultProps = {
  defaultRowHeight: 80,
  rowMinHeight: 50
};


Expected result is since we fix the image width and images can be of different aspect ratio, the height of each row needs to be dynamically computed by cellmeasurer and autosizer should resize the List to show variable size rows.
The action buttons also need to show in the activity item row.