CSS flex-grow 不使列高度匹配答案

【问题标题】：CSS flex-grow not making columns height matchCSS flex-grow 不使列高度匹配
【发布时间】：2021-08-22 06:14:31
【问题描述】：

我有 3 列显示为 flex。它们的文字自然不同，它们的高度不匹配。我正在尝试使用flex-grow: 1; 让它们匹配彼此的高度，但这似乎对我不起作用。谁能告诉我我做错了什么？

.container {
  background-color: red;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .item {
  background-color: blue;
  padding: 5px;
  flex-grow: 1;
  margin: 25px;
  max-width: 200px;
}

https://codepen.io/albert-anthony4962/pen/OJpvZyO

【问题讨论】：

使用对齐项目：拉伸。你可以看这里css-tricks.com/snippets/css/a-guide-to-flexbox/#align-items

标签： css vue.js sass flexbox

【解决方案1】：

在.item 上使用align-self: stretch;；

【讨论】：

【解决方案2】：

您是否尝试过从.container 中删除align-items？

【讨论】：

就是这样，谢谢你帮我弄清楚