Html 镀铬flexbox项目中的高度不正确

对于任何CSS大师来说，我都有一个微妙的问题。 我的绿色div有一个灵活的高度，占据了剩余的部分。 现在我想在这个div里面放一个div，这个div应该是绿色div的一半。但是如果Chrome把它当作整个页面的一半，而不是flex项

HTML

为什么Chrome会这样：

您给了

车身

一个

高度：100%

。然后给它的子对象（

.wrapper

） a

高度：100%

。然后给它的孩子（

.content

）一个

高度：100%

。 所以他们都一样高。给下一个孩子（

#一半内容

）一个

身高：50%

自然是50%的身高 正文的

部分

但是，Firefox不同意，因为事实上，

内容的
高度：100%
被忽略，其高度是根据
flex:1
计算的

也就是说，Chrome解析相对于父级的
height
属性值的百分比。Firefox根据父级的解析灵活高度来执行此操作

正确的行为是Firefox的行为。根据,

如果某个百分比将根据a的
，并且必须将
为了解决百分比问题，以及
百分比必须针对
（即，在完成以下布局算法后
已完成，并且已获得其最终尺寸）

以下是Chrome的解决方案：

#内容{
显示器：flex；
弯曲方向：立柱；
}
#内容：：之后{
内容：''；
弹性：1；
}
#内容的一半{
弹性：1；
高度：自动；
}

这样，
#content
中的可用空间将平均分布在
#content
的一半和
伪元素之后的
：

假设
#内容
没有其他内容，
#内容
的一半将是
50%
。在您的示例中，有一个
2
，因此
50%
会稍微少一些


html，
身体{
身高：100%；
保证金：0；
}
#包装纸{
显示器：flex；
柔性流动：柱；
身高：100%；
}
#菜单{
高度：70像素；
背景颜色：紫色
}
#内容{
弹性：1；
身高：100%；
背景颜色：绿色；
显示器：flex；
弯曲方向：立柱；
}
#内容：：之后{
内容：''；
弹性：1；
}
#内容的一半{
弹性：1；
背景颜色：黄色；
}
#页脚{
高度：100px；
背景色：青色
}

1.
2.
2.1
3.
您完全可以定位
div id=“内容的一半”


关于你的声明：

但如果Chrome将其视为整个页面的一半
而不是弹性项

您给了
车身
一个
高度：100%
。然后给它的孩子（
.wrapper
）一个
高度：100%
。然后给它的孩子（
.content
）一个
高度：100%
。所以他们都一样高。给下一个孩子（
#内容的一半
）一个
身高：50%
自然是身体的50%

然而，对于绝对定位，.
嵌套FlexBox有点麻烦。我通过添加一个带有
display:flex似乎可以完成任务。下面是示例（也使用类名而不是ID）


2.
2.1
.内包装{
位置：绝对位置；
显示器：flex；
弯曲方向：立柱；
身高：100%；
宽度：100%；
}
修复：

关于
#内容
设置

display: flex; 
flex-flow: column nowrap; 
justify-content: flex-end

在
#内容的一半
上设置
flex:0 50%

警告：您需要添加一个
额外的
div作为
#content
的子级

#content {
    flex: 1;
    height: 100%;
    background-color: green;
    position: relative; /* new */
}

#half_of_content {
    height: 50%;
    background-color: yellow;
    position: absolute; /* new */
    width: 100%; /* new */
}

以下是完整的示例：


html，正文{
身高：100%；
保证金：0；
}
#包装纸{
显示器：flex；
柔性流动：柱；
身高：100%；
}
#菜单{
高度：70像素；
背景颜色：紫色
}
#内容{
弹性：1；
身高：100%；
显示器：flex；
柔性流动：柱状nowrap；
证明内容：柔性端；
背景颜色：绿色；
}
#内容的一半{
弹性：0.50%；
背景颜色：黄色；
}
#页脚{
高度：100px；
背景色：青色
}

1.
2.
2.1
3.
我是否能够在内容容器中使用正常高度百分比计算，而无需进行丑陋的修复？因为我以后会把空间分很多。@Doodlemeat因为
#一半的内容
有
height:auto
，所以不能在其子项的
高度
中使用百分比。但是你可以再次使用同样的技巧，例如，如果你想让孩子成为
70%
设置
flex:70
，并添加一个带有
flex:100
的伪元素。这是Chrome和FF之间有趣的区别。我认为传统上，在计算百分比高度时，浏览器会将其解释为
height
属性定义的平均高度。我从未见过
min height
、
max height
或
flex basis
（直到现在）在父级上工作。正如您指出的，该规范有点旧，似乎需要高度（通用术语），但不需要
height
，尽管
height
是主要的实现。看起来FF正在放松其解释。@Michael_B我认为Firefox实现中使用解析高度而不是
height
的值更有意义。前几天我发现了另一个有趣的例子，容器的高度并不直接取决于内容的高度，而是通过
minheight:auto
实现的。我想我们得走了
#content {
    flex: 1;
    height: 100%;
    background-color: green;
    position: relative; /* new */
}

#half_of_content {
    height: 50%;
    background-color: yellow;
    position: absolute; /* new */
    width: 100%; /* new */
}

<div class="content">
  <div class="wrapper-inner">
    2
    <div class="half">
      2.1
    </div>
  </div>
</div>

.wrapper-inner {
    position: absolute;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

display: flex; 
flex-flow: column nowrap; 
justify-content: flex-end