Opera 中的灵活框布局答案

【问题标题】：Flexible Box Layout in OperaOpera 中的灵活框布局
【发布时间】：2015-01-23 21:10:28
【问题描述】：

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

来源：

<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>

【问题讨论】：

标签： html css opera flexbox

【解决方案1】：

在 Blink（Chrome 和 Opera 使用）中存在一个关于“拉伸对齐”的 flex 项目（如您的测试中）的已知错误。

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

您的测试是有效的，规范对此非常清楚：

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

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

【讨论】：

谢谢，我是这么想的，但有疑问。