Opera 中灵活的盒子布局

Question

Opera (26) 中的弹性框有一个奇怪的行为。以相对单位 (%) 设置高度 flex-div 的后代会导致计算绝对高度，而不是从其祖先计算绝对高度，但在我的例子中是从顶部 div 计算。宽度或绝对单位没有问题。在 Firefox 中没问题。是 Opera 的 bug 还是我理解错了规范？

来源：

<html>
<head>
<style>
.flex-cont {
    display: flex;
    flex-direction: row;
    border: 1px solid red;  
}
.flex-item {
    border: 1px solid black;
    flex-shrink: 1;
    flex-grow: 1;
    margin: 5px;
}
</style>
</head>
<body>
    <div class='flex-cont' style='position:absolute; width:200px; height:200px'>
        <div class='flex-item'>
            <div style='width:100%; height:100%; background-color:rgba(0,255,0,0.5);'></div>
        </div>
        <div class='flex-item'></div>
    </div>
</body>
</html>

Answer 1

Blink（由 Chrome 和 Opera 使用）中存在一个关于弹性项目 "stretch-aligned"（就像在您的测试中一样）的已知错误。

https://code.google.com/p/chromium/issues/detail?id=341310

您的测试有效，规范对此非常明确：

http://www.w3.org/TR/css3-flexbox/#algo-stretch

不过，您应该考虑在顶部插入行，这样浏览器就不会进入怪癖模式。 Blink 在你的测试中失败的方式不同，这取决于怪癖模式与否。 :)

Opera 中灵活的盒子布局

Flexible Box Layout in Opera

html

css

opera

flexbox