В React.js неверный clientHeight получил при использовании flexGrow

От MSDN - Element.clientHeight

The Element.clientHeight read-only property is zero for elements with no CSS or inline layout boxes, otherwise it's the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin.

Акцент мой.

Вывод вашей песочницы кода для меня:

1 
True Height 
233.8
Wrong Height 
239
clientWidth 
167

Если вас интересует разница в десятичной запятой, ссылка также отмечает:

Note: This property will round the value to an integer. If you need a fractional value, use element.getBoundingClientRect().

На самом деле проблема здесь иная, чем я думал изначально. Рабочая вилка Codepen

Первоначально проблема с вашим кодом заключалась в том, что вы пытались проверить высоту до того, как компонент будет фактически отрисован в DOM.

Поскольку высота div зависит от размера окна - при изменении размера окна вам нужно будет пересчитать его.

Для этого я добавил слушателя изменения размера окна:

  componentDidMount() {
    window.addEventListener("resize", this.updateHeightHandler);
  }

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

updateHeightHandler = () => {
  console.info("UPDATE HEIGHT HANDLER");
  this.setState({
    div1Height: this.div1.clientHeight,
    div2Height: this.div2.clientHeight,
    div3Height: this.div3.clientHeight
  });
  this.logHeightHandler();
};

Сначала я пытался заставить это работать без обработчика изменения размера окна (с логикой setstate непосредственно в componentDidMount), и это не сработало. Изображения не были загружены во время запуска componentDidMount (), что привело к неверным результатам. Как только я понял, в чем проблема, решение проверить ее при изменении размера стало для меня разумным, но я открыт для альтернативных предложений о том, как это можно сделать!

Если требуется получить высоту сразу после загрузки изображений, а не после изменения размера окна, вы можете добавить событие onLoad к элементу <img>, например:

onLoad = {this.onImageLoadHandler}

Оттуда вы просто установите состояние для div, соответствующее загруженному изображению.

Если вам нужны дополнительные разъяснения о том, как это реализовать, дайте мне знать, и я смогу обновить код.