html - 使div和最大div一样大

这个问题已经有了答案：
How do I keep two side-by-side divs the same height?
21个答案
我想创建一个包含3个容器的计划/定价页面。每个容器都包含一些信息，一个基本的例子是github定价页面

目前我的容器看起来像

当我试着给他们相同的高度时，他们看起来像

你可以看到他们现在变得太大了。
我创建了一个使用codesandbox的工作小提琴，因为我使用vuejs
https://codesandbox.io/s/2x50024vl0
我怎么能把它们做成最大的集装箱那么大？

最佳答案

这应该有用

.planContainer {
  display: flex;
  flex-direction: column;
}
.planTitle {
  flex-grow: 0;
}
.planContent {
  flex-grow: 1;
}

https://codesandbox.io/s/5m256839px
解释
如果您检查#plans元素，它是一个网格。所有的网格项（.planContainer）总是相同的高度，因为它们在同一个网格轨道上。网格项总是这样，你不能做任何事情。
但是.planContainer的内容不是相同的宽度，因为它们与网格项的高度无关。如果使用垂直（flex-direction: column;）flex并允许.plancontent网格项增长（grow: 1;），就完成了。
附录
然后，您可以像github示例一样轻松地添加一个grow: 0的页脚。