Css 高度：Safari中断开的语义UI列内部div上的100%

我正在尝试使用语义UI创建一行等高的列，这些列之间用檐槽隔开。我的解决方案适用于Chrome和Firefox，但不适用于Safari（我还没有测试IE）。Safari开发工具显示，每个列的高度与预期的相同，但是创建

.inner

div并将高度设置为100%对

.inner

的高度没有影响

我相信我需要

.internal

div，以便每个块都有一个背景色，由一个槽隔开

一个JSFIDLE来说明这个问题。对我来说，它在Chrome中呈现如下：

就像在Safari中：

我不确定这是否是WebKit中的bug（甚至是blink/gecko！），我发现了一个，但它被标记为已修复/已解决

---

如果我的方法没有问题，有人能提出解决办法吗？最好不使用JavaScript进行修补。

请使用

显示：表格它会工作的


.inner{
身高：100%
}
身体{
字体系列：“helvetica”；
背景：白色；
}
#第1列{
背景：#e3e0cf；
}
#第2栏{
背景：#9fa8a3；
}
.equal{display:table；}
.column{display:table cell；}

第1栏
第2栏

首先
第二
第三

这确实是Safari中的一个已知问题。解决方法是在.ui.grid.column上定义高度属性，并将div.inner高度设置为“继承”。以下是在Safari浏览器中工作的css代码：

div.inner{
    height:inherit;
    background-color:gold;
}

.ui.grid .column{
    height:25vh;
}

屏幕截图：
据我所知，这不是一个解决方案，因为通过去掉
.inner
div，如果我添加
，元素之间的空白就会丢失。inner
返回，那么即使使用
display:table，同样的错误仍然存在