reactjs - 在调整浏览器窗口大小之前，Flex 项目不会扩展到 100% 宽度

Question

我在 React 应用程序中有一个 Flexbox 容器，带有flex-direction: row. 容器包含两个瓷砖，都带有flex: 1. 每个占宽度的 50%，如下图所示。这是意料之中的。

但是，当组件的状态发生变化，只Tile 1渲染时，它仍然只占据 50% 的宽度，并没有扩大到占据整个宽度。当我稍微摆动浏览器窗口时，Tile 1会扩展到全宽。请注意，在窗口调整大小期间组件的状态没有改变，只是图块现在占据了整个宽度。我在想我可能遇到了一些 React + Flexbox 错误。任何想法这可能是什么？

不幸的是，我无法用一个最小的例子重现这个问题。这是完美运行的最小示例的实时版本！源代码在这里。

渲染的 HTML 和 CSS 实际上很简单，如下所示：

body {
  font-family: Arial, Verdana, Helvetica, sans-serif;
}

.container {
  display: flex;
  flex-direction: row;
}

.content {
  flex: 1;
  min-width: 0;
  margin-right: 4px;
  padding: 4px;
  height: 60px;
  color: white;
  background-color: #2196f3;
}

<div class="container">
  <div class="content">
    Tile 1
  </div>
  <div class="content">
    Tile 2
  </div>
</div>

实际代码使用react-measure和react-swipeable-views进一步包装，但我认为这些不会导致问题。