高度：100%工作在Chrome但不在Safari[副本]

Question

但是，它在Safari中并不起作用。但是如果我们将.handle-inner中的高度从100%更改为400px，我们将观察到拆分器（从上到下到400px)变得可拖动。这意味着height:100%在Safari中不起作用。

有没有人知道如何修改代码，使拆分器在Chrome和Safari中都能工作？

编辑1：

Answer 1

您的flex容器(.flex-box)定义的高度为500px。

拆分器(.handle-inner)定义的高度为100%。

但是，存在于它们之间的.handle没有定义的高度。Safari认为这是一个缺失的环节，它认为这违反了规范，该规范本质上说：

此外，在body元素中，不仅有.flex-box元素，还有nav元素，其高度:250px。取决于浏览器如何处理溢出(250px+100%)，这可能会导致splitter元素在屏幕外消失，这在Safari中就发生了。

要避免该问题,请对代码进行以下调整：

 * { box-sizing: border-box; }   /* include borders and padding in width
                                    and height calculations */

 .flex-box { height: calc(100% - 250px); } /* compensate for nav height */

修订的演示