3

编辑：从 Chrome 34 开始，下面的构造将按预期正确呈现。由此可以看出，它实际上是早期 Chrome 版本中的一个错误，并且这个相对简单的 CSS可以正常工作。

所以我刚刚发现了视口百分比长度，我认为它们会非常适合使用 flex-box 进行流畅的响应式布局测试。令人惊讶的是，Firefox 和 Internet Explorer 以相同的方式呈现它，正如预期的那样。这一次，Chrome 拒绝按我说的做。

我想要：没有滚动条，所有div元素都根据父母改变大小，使用height: 100%，即使没有内容，也可以看到盒子布局，在布局中插入块级内容。

更具体地说，它是父元素的高度似乎没有被继承。在这种情况下，我希望height: 100%内部元素会产生父元素的高度，它本身就是70vh（等于视口高度的 70%）。

如果内部没有div，Chrome 根本不会显示该元素（与 FF/IE 不同），就好像它们根本不是块元素（没有高度为空）。

请告诉我：

  • 它是一个未记录的 Chrome 错误（还是 Webkit 需要其他属性）？
  • 如果不是错误：FF 和 IE 以这种方式运行的原因是什么（似乎是正确的）？
  • 可能flex-direction: column是问题（修改元素流）？

毕竟，它说我可以使用它。


这是代码：http: //jsfiddle.net/ZPRdh/

这是一个渲染：

在浏览器中渲染

编辑

这似乎flex-box与这个问题无关。以下 HTML 页面再现了布局理念，并且在 IE 和 FF 中呈现相同的内容，但在 Chrome 中不同：

<!DOCTYPE html>
<html>
    <head>
        <title>stackoverflow.com/questions/19450503/</title>
        <style type="text/css">
            body{background-color:#000;margin:0;font:normal 4em sans-serif;color:#888;}
            header,section,footer{overflow:hidden;}
            header,section,footer,article,figure{display:block;margin:0;padding:0;}
            header {background-color:#333;height:20vh;}
            section{background-color:#555;height:70vh;}
            footer {background-color:#777;height:10vh;}
            article{background-color:#999;width:20vmin;height:20vmin;}
            figure {background-color:#BBB;width:50%;height:50%;}
        </style>
    </head>
    <body>
        <header></header>
        <section>
            <article>
                <figure></figure>
            </article>
        </section>
        <footer></footer>
    </body>
</html>

要么我（和其他人）在这里没有得到基本的东西，要么 Chrome 中存在实际的意外不一致。

4

1 回答 1

3

I'm not sure if this is a bug or feature, but Chrome (and Opera's using Presto) doesn't the treat the length along the main axis the same way it does the element's actual size (height for column orientation, width for row orientation). That's why percentages aren't working as you expect: the height of the middle element is treated as being just large enough to contain your 4 lines of text.

If you need the children to fill the flex item, you'll need to promote it to a flex container (though this doesn't work out quite right in your case).

http://jsfiddle.net/ZPRdh/3/

.b {
    height:70vh;
    background-color:#555;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.b>div:nth-child(1) {
    width:50%;
    height:30%;
    flex: 30%;
    background-color:#AAA;
}
.b>div:nth-child(2) {
    width:40%;
    height:40%;
    flex: 40%;
    background-color:#CCC;
}
.b>div:nth-child(3) {
    width:30%;
    height:30%;
    flex: 30%;
    background-color:#EEE;
}
于 2013-10-21T12:50:29.533 回答