防止孩子伸展父Flexbox的伎俩并不适用于所有浏览器

Question

我找到了一个防止子元素拉伸其flexbox父级的技巧。

为此，我使用：

.magic {
  background: yellow;
  display: flex;
  flex-direction: column;
  width: 300px;
}
.magic > div {
  flex: 1;
  height: 0; // this makes the trick
  overflow: auto;
}

http://codepen.io/FezVrasta/pen/bdgyNj

如您所见，左列有滚动条而不是拉伸整个弹性框。

但是这件事并不适用于Firefox（可能在IE上，我无法对其进行测试）。

你们知道如何让它跨浏览器工作吗？

Answer 1

看起来解决方案是：

不要使用这个技巧！

如果您使用简单height: 0;替换flex: 1 1 0，它将完美无缺。 请记住不要将%符号添加到尾随0（如果您使用速记flex: 1，这是默认行为）。