Css 防止孩子拉伸父flexbox的技巧'；不能在所有浏览器上工作

我发现了一个防止子元素拉伸其flexbox父元素的技巧

为此，我使用：

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

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

但这在Firefox上不起作用（可能在IE上也不起作用，我无法测试它）

---

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

看起来解决方案是：

别耍花招

如果替换

高度：0使用一个简单的
flex:11
，它将完美地工作。
请记住不要将
%
符号添加到尾部的
0
（如果使用速记
flex:1
，这是默认行为）。
看起来解决方案是：

别耍花招

如果替换
高度：0使用一个简单的
flex:11
，它将完美地工作。
请记住不要将
%
符号添加到尾部的
0
（如果使用速记
flex:1
，这是默认行为）。
此技巧看起来像一个技巧，而不是正常行为。您可能应该在此处使用
display:table
CSS表需要很多额外的标记。。。奇怪的是，新的超级强大的FlexBox不能处理这么简单的任务。这个技巧看起来像一个技巧，而不是一个正常的行为。您可能应该在此处使用
display:table
CSS表需要很多额外的标记。。。奇怪的是，新的超级强大的FlexBox无法处理如此简单的任务。不过，此演示已脱机，不再工作。不过，此演示已脱机，不再工作。