Chrome中的Flexbox容器不能获得100%高度[重复]
在另一个flex容器内的Flexbox列容器在Chrome中没有得到100%的高度，但在Firefox和Edge中都可以。
Codepen示例
.container {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
.inside-container {
display: flex;
flex-direction: column;
height: 100%;
}
}
共有1个答案
父元素
height:100%
一旦你把它添加进去，布局在Chrome中也能工作。
header {
min-height: 100%;
width: 100%;
height: 100%; /* NEW */
}
修订代码本
-
null
-
null
-
问题内容： 我在flexbox列上遇到了麻烦，因为flex’d元素的子元素无法以百分比响应。我仅在Chrome浏览器中进行了检查，据我了解，这只是Chrome浏览器的问题。这是我的示例： HTML CSS 我想要它，以便红色填充蓝色。为什么不起作用？ 问题答案： TL; DR： 设置为，并摆脱on 。[您可以在此处查看修改后的CodePen。] 工作原理： 我从这个类似的问题中学到，根据flexb
-
问题内容： 对于任何CSS专家来说，我都有一个棘手的问题。我的绿色div的高度灵活，可以容纳剩余的高度。现在我想在该div中放置一个div，该div应该是绿色div的一半。但似乎Chrome是否将其视为整个页面的一半而不是flex项目。 HTML CSS 问题答案： 您可以绝对定位。 关于您的声明： 但似乎Chrome是否将其视为整个页面的一半而不是flex项目。 您给了。然后给它的孩子（）一个。
-
问题内容： 使用twitter bootstrap（2），我有一个带有导航栏的简单页面，并且我想在其中添加100％高度的div（到屏幕底部）。我的css- fu生锈了，我无法解决。 简单的HTML： 当前的CSS： 编辑* 我将高度添加到填充类，如下所示。但是，问题是我在主体上添加了padding-top以解决顶部的固定导航栏。这会影响“地图” div的100％高度，并意味着添加了滚动条 问题答案
-
问题内容： 我有一个简单的2列布局，我想使用Flexbox获得相等的高度： 的HTML 的CSS 这适用于Firefox，但不适用于Chrome： 我尝试了一些方法（包括供应商前缀），但仍然无法正常工作。 问题答案： 要使用Flexbox创建两个相等的列： 父容器得到 每列都是由div创建的，它们可以增长/收缩 拉伸第一列的子级： 还提供了第一列，以便其子元素具有柔韧性并可以成长 旁边的孩子被给予
-
编辑* 我已经按照下面的建议将height添加到fill类中。但是，问题是，我添加了一个padding-top到身体，以说明固定的navbar在顶部。这会影响“map”div的100%高度，并意味着会添加滚动条--如下面所示:http://jsfidle.net/s3gvf/2/有人能告诉我如何修复吗？
-
我已经读了几篇flexbox教程，但我仍然无法使这个简单的任务发挥作用。 我怎样才能使红框达到100%的宽度？ 代码： 样式： 谢谢！ 更新1：Nishanth Shankar的建议，为包装器添加flex:1，flexDirection:'row' 输出： 代码：