如何实现跨浏览器可嵌套的flex-box布局？

Question

我创建了一组简单的css类来实现以下功能：

• 将占用所提供容器的所有空间。
• 允许无限制地嵌套垂直和水平布局。
• 将允许任何部分中的可滚动内容。
• 允许生长部分的大小（宽度或高度）占据他们需要的空间而不是更多。
• 允许“增长”部分占用所有可用空间。

我的示例是在Chrome中工作，但在Firefox中没有。我不确定Chrome或Firefox是否根据规范正确呈现。无论哪种方式，我想了解如何在所有现代浏览器中实现Chrome中的功能。

示例：

https://jsfiddle.net/5a95f2a1/5/

CSS：

<div>
    <label for="start">Start</label>
    <input type="number" name="start" value="4">
</div>
<div>
    <label for="end">End</label>
    <input type="number" name="end" value="20">
</div>
<div>
     <label for="step">Step</label>
     <input type="number" name="step" value="6">
</div>
<p id="myP"></p>