Flex 可调整大小的子项无法在 Firefox 中调整大小

【问题标题】：Flex re-sizable children cannot be resized in FirefoxFlex 可调整大小的子项无法在 Firefox 中调整大小
【发布时间】：2018-12-21 09:50:51
【问题描述】：

我刚进入 flex 世界，在这样的设置上有点挣扎： https://jsfiddle.net/5b0pLgkj/

在 Chrome 和 Safari 中，它可以完美运行，子元素可以重新调整大小并占据容器的全部空白空间。然而，在 Firefox 中，flex:1 似乎没有做任何事情，并且无法调整子项的大小（尽管 DOM 中的高度似乎在发生变化）。

真的有必要使用flex:auto吗？当我这样做时，它似乎起作用了，但孩子们不再占据所有的空白空间。有什么想法吗？

谢谢！

【问题讨论】：

【解决方案1】：

flex:1;相当于flex: 1 1 0n;

在 Chrome 中，例如 flex:1 和 flex:1 1 0; 会产生不同的结果，因为忽略了 flex-basis 并且只应用了 flex-grow 和 flex-shrink。

所以，您的flex-basis 设置为零，而 FF 将其读取为 0，这对您想要的效果不起作用。

将其设置为flex: 1 1 auto; 或简单的flex: auto;

Flex 是 flex-grow、flex-shrink 和 flex-basis 的简写。

【讨论】：

flex: 1 1 auto 不等于 flex:auto?。不幸的是，正如我在问题中提到的，孩子们没有占据全部空间，并且调整大小在 Edge 中不起作用。