Html CSS flex grow不适用于顶部添加的div

考虑以下几点：

要求如下：

• 包含标题和内容的两列
• 立柱顶部应对齐
• 柱子的底部应该对齐
• 在每列的顶部都应该有一个水平居中的箭头

如果通过使用class

.arrow wrapper

删除

div

来消除箭头，则代码工作正常，但我需要箭头

解决方案可以是绝对定位箭头，但是有没有一种方法可以解决flex在不绝对定位箭头的情况下的布局问题

应该适用于现代浏览器和IE11

。行包装器{
显示器：flex；
}
外罩{
显示器：flex；
柔性包装：包装；
}
.箭头包装{
宽度：100%；
文本对齐：居中；
字体大小：30px；
}
上校包装{
宽度：100%；
显示器：flex；
弯曲方向：立柱；
边框：2倍纯红；
颜色：白色；
}
.col包装器.header{
背景：蓝色；
}
.col.contents{
弹性：10自动；
背景：绿色；
}

&达尔；
请把顶部对齐。
让我成长。
&达尔；
请把顶部对齐。
让我成长。
请将底部对齐。

在您的div中使用类

列包装器外部

，而不是此：

.col-wrapper-outer {
  display: flex;
  flex-wrap: wrap;
}

使用以下命令：

.col-wrapper-outer {
  display: flex;
  flex-direction: column;
}

然后将

flex:1

添加到

.col wrapper

中，使其占据容器的整个高度

。行包装器{
显示器：flex；
}
外罩{
显示器：flex；
/*柔性包装：包装*/
弯曲方向：列；/*新*/
}
.箭头包装{
宽度：100%；
文本对齐：居中；
字体大小：30px；
}
上校包装{
弹性：1；/*新*/
宽度：100%；
显示器：flex；
弯曲方向：立柱；
边框：2倍纯红；
颜色：白色；
}
.col包装器.header{
背景：蓝色；
}
.col.contents{
弹性：10自动；
背景：绿色；
}

&达尔；
请把顶部对齐。
让我成长。
&达尔；
请把顶部对齐。
让我成长。

请

对齐

屁股。

在Chrome中完成这项工作，但在IE11中没有。在IE11中，顶部对齐，但底部不对齐（较小的列不会按照代码要求增长）。啊，是的。抢手货

flex

属性在IE中存在渲染问题。我已在中详细介绍了该问题。解决方案可以跨浏览器工作，它是使用longhand属性

flex-grow

。