Flexbox grand-child无法将高度设置为Chrome中父级的百分比

Question

我正在制作一个使用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/

Answer 1

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

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

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

https://jsfiddle.net/yo3x5bw5/