现在，我的橙色方块（弹性容器中的子方块）按预期工作，并且它们的高度相同，但我无法使其适用于红色方块。
我想让红色项目（孩子的孩子）的高度都与最高的高度相同。
我的 HTML 如下：
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-content: center;
}
.col {
flex: 1;
background:orange;
margin: 1px;
}
.col-item {
margin: 15px;
}<html>
<body>
<div class="container">
<div class="col">
<div class="col-item" style="background: red;">
<h2>Column 1</h2>
<p>Hello World</p>
</div>
</div>
<div class="col">
<div class="col-item" style="background: red;">
<h2>Column 2</h2>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
</div>
</div>
<div class="col">
<div class="col-item" style="background: red;">
<h2>Column 3</h2>
<p>Some other text..</p>
<p>Some other text..</p>
</div>
</div>
</div>
</body>
</html>父容器上的 flex 属性（container在您的示例中）不会传递给子元素，即使它们也是容器。因此，您还需要制作coldiv display:flex，如下所示：
.col {
flex: 1;
display: flex; /* make this a flex container so it has flex properties */
justify-content: center; /* to horizontally center them in this flex display */
/* REST OF YOUR CSS HERE */
}
请注意，您还需要添加flex: 1;内容本身，这样它就不会缩小，例如：
.col-item {
flex: 1;
/* REST OF YOUR CSS HERE */
}
使用您的代码的工作示例：
.col {
flex: 1;
display: flex; /* make this a flex container so it has flex properties */
justify-content: center; /* to horizontally center them in this flex display */
/* REST OF YOUR CSS HERE */
}
.col-item {
flex: 1;
/* REST OF YOUR CSS HERE */
}