Html 屏幕大小更改时Safari未正确对齐div

这个错误只发生在Safari中，我不知道如何解决它

我有一个样式化的div，当屏幕是特定大小时，它在Chrome中看起来像这样。请注意，所有蓝色B彼此正确对齐：

在Safari中，屏幕大小几乎相同的完全相同的div如下所示：

请注意，蓝色“B”在Safari示例中没有对齐，但在Chrome示例中保持对齐。另外值得注意的是，如果屏幕尺寸更宽，则不会出现此问题。以下屏幕截图也取自Safari，其中B在所有三行之间正确对齐：

似乎正在发生的事情是，如果某个div的内部元素包含文本并且与其他div水平对齐，Safari将在该div的边距上进行快速和松散的操作

在Safari中，如何使“B”始终对齐

上图中使用的html/css如下所示，以供参考：

/*样式在这里*/
.目标{
背景色：白色；
边框颜色：#23b389；
边框样式：实心；
边框宽度：1px 1px 1px 20px；
利润率：20px 0 0 20px；
}
.可点击{
光标：指针；
}
.物品容器{
显示：-webkit框；/*旧版-iOS 6-，Safari 3.1-6*/
显示：-moz-box；/*OLD-Firefox 19-（有bug，但大部分有效）*/
显示器：-ms flexbox；/*TWEENER-IE 10*/
显示：-webkit flex；/*新-Chrome*/
显示：内联flex；/*新，规范-Opera 12.1，Firefox 20+*/
宽度：100%；
对齐项目：居中；
证明内容：之间的空间；
}
.item容器>：非（：第一个子项）{
填充：20px；
}
.item容器>：最后一个子项{
左侧填充：0px；
}
.折叠扩张器{
保证金：自动0自动-20px；
颜色：黑色；
字体大小：20px；
光标：指针；
}
.文本{
字体大小：正常；
空白：预包装；
单词包装：打断单词；
柔性生长：1；
}
.标准图标{
颜色：#1aa8de；
字体大小：22px；
光标：指针；
}
.菜单图标{
颜色：#1aa8de；
字体大小：22px；
光标：指针；
位置：相对位置；
}

A.
B
这是一段很棒的文章！我非常喜欢这一段，所以我会一直打字，我想什么时候打字就什么时候打字。这太酷了。
C
D
A.
B
太酷了。
C
D
A.
B
他的头发很酷。
C
D

问题在于，您对flexbox中flex项的属性不够具体，因此flex项的比例不明确，并且有可能因内容不同而无法预测

---

而不仅仅是

flex-grow:1

在

.text

上，尝试将其更改为

flex:1 0 75%，指定。
通过在可单击文本div上添加100%的宽度来修复

.clickable.text {
   width: 100%;
}