使用 flexbox 继承视口高度（Chrome 中的不一致）‽
Posted
技术标签:
【中文标题】使用 flexbox 继承视口高度（Chrome 中的不一致）‽【英文标题】：viewport height inheritance with flexbox (inconsistency in Chrome)‽ 【发布时间】：2013-10-27 08:19:33 【问题描述】：编辑：从 Chrome 34 开始，以下构造将按预期正确呈现。由此可见，它实际上是早期 Chrome 版本中的一个错误，而这种相对简单的 CSS简单 可以工作。
所以我刚刚发现了viewport-percentage lengths，我认为他们会很适合使用 flex-box 进行流畅的响应式布局测试。令人惊讶的是，Firefox 和 Internet Explorer 以相同的方式呈现它，正如预期的那样。这一次，Chrome 拒绝照我说的做。
我想要：没有滚动条，所有div元素都根据父元素改变大小，使用height: 100%，即使没有内容也可见框布局，在布局中插入块级内容。
更具体的原因是父元素的高度似乎没有被继承。在这种情况下，我希望内部元素上的 height: 100% 会产生父元素的高度，它本身就是 70vh（等于视口高度的 70%）。
如果内部没有div，Chrome 将根本不会显示该元素（与 FF/IE 不同），就好像它们根本不是块元素（没有高度为空）。
请告诉我：
这是一个未记录的 Chrome 错误（还是 Webkit 需要其他属性）？ 如果不是错误：FF 和 IE 出现这种行为的原因是什么（看似正确）？flex-direction: column 可能是问题（修改元素流）吗？
毕竟，上面写着I can use it。
这是代码：http://jsfiddle.net/ZPRdh/
这是一个渲染：
编辑
似乎flex-box 与此问题无关。以下 html 页面再现了布局思想，并且在 IE 和 FF 中呈现相同，但在 Chrome 中不同：
<!DOCTYPE html>
<html>
<head>
<title>***.com/questions/19450503/</title>
<style type="text/css">
bodybackground-color:#000;margin:0;font:normal 4em sans-serif;color:#888;
header,section,footeroverflow:hidden;
header,section,footer,article,figuredisplay:block;margin:0;padding:0;
header background-color:#333;height:20vh;
sectionbackground-color:#555;height:70vh;
footer background-color:#777;height:10vh;
articlebackground-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 中存在实际的意外不一致。
【问题讨论】：
【参考方案1】：我不确定这是错误还是功能，但 Chrome（以及 Opera 使用 Presto）不会像处理元素的实际大小（列方向的高度，行方向的宽度）。这就是百分比没有按预期工作的原因：中间元素的高度被视为刚好足够容纳 4 行文本。
如果您需要子项来填充弹性项目，则需要将其提升为弹性容器（尽管在您的情况下这并不完全正确）。
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;
【讨论】：
以上是关于使用 flexbox 继承视口高度（Chrome 中的不一致）‽的主要内容，如果未能解决你的问题，请参考以下文章