CSS使div的高度相等（调整为具有最多内容的div）

Question

我正在为我的网站创建一个问答游戏。有时会发现答案的内容长度不同，这意味着包含内容的div具有不同的高度。

我希望它们具有相同的高度。他们必须以某种方式获得具有最多内容的div的高度

这是一个有问题的Fiddle。

实际网站为https://www.path-of-exile-builds.com/quiz

问题：

我尝试使用

display: flex;

但它从未奏效。现在我没有想法。 我可能会尝试使用JS并在显示下一个问题时设置元素高度，但我觉得应该有一个更简单的CSS解决方案。

Answer 1

是的，Flexbox就是这样，但你必须正确设置它。这几行代码实现了神奇：

.quiz-container {
  display: flex;
  flex-flow: row wrap;
}
.quiz-container .question {
  flex: 1 0 100%;
}
.quiz-container .helper {
  flex: 0 0 50%;
}
.quiz-container .helper .possible-answers {
  height: 100%;
}

在此处尝试实时版：https://jsfiddle.net/xpdxyaz6/79/