防止孩子拉伸父 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

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

但是这个东西在 Firefox 上不起作用（可能在 IE 上，我无法测试它）。

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

Answer 1

看起来解决方案是：

不要用诡计！

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