如何对齐表格等弹性项目？

Question

我有两个显示信息的伸缩框，我希望它们的行内容像表格一样排列。

他们每个人都占父母的50％，并据此调整大小。

问题是我的标题大小不一，我无法使“内容”垂直排列。

以下是使用表格的正确布局： 这是我使用flex的东西：

我尝试在标题上设置最小宽度，但是当我调整浏览器大小时，内容较短的flexbox会比其他内容缩小更多。

专门针对flexbox解决方案，因为有些响应性调整会破坏表格。

https://codesandbox.io/s/8k6qyrovjl

更新：在@seantunwin的帮助下，问题似乎是一段内容很长，例如字符串。网址（更新的代码）。似乎使一切不同步

Answer 1

将.row的第一个子项设置为flex父级宽度的50%或任何适合您的值。

要考虑自动换行，您还可以将.row的第二个孩子设置为50%或其他您可以接受的值。

下面的代码中还有一个注释，作为进一步美学的想法。

.row :first-child {
  flex: 0 1 50%;
}

.row :nth-child(2) {
  flex: 0 1 50%;
  /* Align to bottom of cell if you're inclined for long text in adjacent */
  align-self: flex-end;
}

示例：a fork from the example in OP