Question

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>

Answer 1

Blink（由Chrome和Opera使用）中存在一个已知的错误，即关于弹性对齐的弹性项目＆＃34; （就像在你的测试中一样）。

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

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

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

但是，您应该考虑插入＆lt;！DOCTYPE html＆gt;在顶部的行，以便浏览器不进入怪癖模式。根据怪癖模式的不同，Blink会因测试而失败。：）

Opera中的灵活盒子布局

1 个答案: