Chrome中的Flexbox--如何限制嵌套元素的大小？[副本]

Question

在Google Chrome中，如何强制flexbox成员（所谓“flexbox成员”是指样式为display:flex的元素的子元素）内嵌套的元素将其大小限制在其嵌套的flexbox成员的大小？例如，假设我有以下内容：

<div style="display:flex; flex-direction:column; height:100vh;">
  <div style="height:60px;">Static header</div>
  <div style="flex: 1 1 0; overflow:hidden;">
     <div style="overflow:auto; height:100%;" id="problem-is-here">
       Lots and lots of content, way too much to fit in the viewport
     </div>
  </div>
</div>

因为最外层的div的第一个子div具有恒定的高度，所以它最终只有60px高，因为第二个子div的flex-grow的flex-grow的flex-grow的flex-grow的flex-grow的flex-grow获得剩余的可用空间（在本例中，是视口的100%减去60px)。我可以确认，根据Inspect Element这个元素的维度刚好足够大，可以占用视口空间的其余部分。

在Firefox和IE11中，由于height:100%，最里面的元素(id=“problem-is-here”)采用为其父元素计算的高度。因此，由于它太小，无法显示其内容，并且溢出设置为自动，因此它（而不是整个正文)将获得一个垂直滚动条。这就是我想要的。

然而，在Chrome中，最里面的元素呈现的高度足以包含它的所有内容，比其父元素的高度大。因此，由于其父项具有overflow：hiddit，因此不会出现滚动条，并且无法访问多余的内容。当父元素的高度是由flexbox而不是CSSheight属性确定时，我如何告诉Chrome以最多等于父元素的高度来呈现这个最里面的元素？请注意，我不能给最里面的div或它的父级一个确定的height值，因为在我正在处理的应用程序中，其他flexbox成员的数量可能不同。

注意：我尝试了其他答案中的一些建议，例如将所有元素设置为min-height:0而不是auto，或者确保将flex-basis设置为0，但这些都没有奏效。参见

http://plnkr.co/edit/ubrcrnmr5idbn3exu6fi?p=preview

以获取一个说明问题的示例。（id为heres-the-problem的div是我希望将其高度限制在其父级高度的那个。）

Answer 1

首先，让我们讨论一下术语：

...如何强制嵌套在flexbox成员（“flexbox成员”指的是样式为display:flex的元素的子元素）内的元素将其大小限制为嵌套在其下的flexbox成员的大小？

具有display:flex的元素称为flex容器（技术上）或flex父元素（通俗地说）。

flex容器的子级称为flex项。注意children这个词（第一级）。子级之外的flex容器的后代不是flex项，大多数flex属性不适用于它们。

现在，回答你的问题：

问题是Firefox（显然还有IE11)对百分比高度规则的解释与Chrome不同。

百分比
指定百分比高度。该百分比是相对于生成的方框的包含块的高度计算的。如果未显式指定包含块的高度，并且该元素未绝对定位，则该值计算为“auto”。

auto
高度取决于其他属性的值。

换句话说，如果您希望元素具有百分比高度，那么您必须在包含块（即父块）上指定一个高度。

Chrome vs Firefox（我没有测试过IE11，这里就不提了）

传统上，在计算高度百分比时，浏览器将规范中使用的术语“height”解释为height属性的值。它可以很容易地解释为高度（通用术语），但是height属性要求已经成为主要的实现。我从未见过min-height或max-height在处理百分比高度时对父级起作用。

然而，最近，正如在这个问题和另一个问题中所指出的，Firefox已经扩大了它的解释范围，接受flex高度。

目前尚不清楚哪种浏览器更符合要求。

解决方案

与其使用flex:1 1 0%定义.variable-flex-content的高度，不如尝试使用height:100%或height:calc(100%-60px)或绝对定位。