Flexbox孙子不能将高度设置为Chrome中父母的百分比[重复]答案

【问题标题】：Flexbox grand-child cannot set height as a percentage of parent's in Chrome [duplicate]Flexbox孙子不能将高度设置为Chrome中父母的百分比[重复]
【发布时间】：2016-09-11 04:43:17
【问题描述】：

我正在制作一个使用flexbox 的网站。我发现了 Firefox 和 Chrome 实现的不同之处。在我看来，Chrome 的行为似乎不正确。

问题是这样的。假设我们有一个div 和display: flex 和flex-direction: row。这个 div 包含两个孩子 c1 和 c2。 c1 和 c2 都将具有相同的高度，这是适合任一子项中的内容所需的最大高度。如果我们向c1（比如c11）添加一个孩子，那么这个孩子（c11）不能将它的高度设置为它的父母（c1）的百分比。在 Firefox 中，这可以正常工作。这是一个说明差异的小提琴（在 Firefox 和 Chrome 中打开）：

https://jsfiddle.net/9pyn2urq/

【问题讨论】：

标签： html css google-chrome flexbox

【解决方案1】：

在您的假设示例中，您需要为c1 创建一个新的弹性上下文，并添加align-items: stretch。

.c1 {
  display: flex;
  align-items: stretch;  
}

我修改了您的小提琴，使其使用这些新规则。另请注意，在修改后的示例中，我删除了#insideFlexy 上的height: 100%，因为它的父级#flexy1 使用align-items: stretch。

https://jsfiddle.net/yo3x5bw5/

【讨论】：