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

Question

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

3

在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 的第一个子元素具有固定的高度，因此它的高度恰好为 60 像素。而第二个子元素的 flex-grow 属性值为 1，则它得到了剩余空间（在这种情况下，是视口的 100% 减去 60px），根据“检查元素”功能，可以确认该元素的尺寸正好足够占据剩余的视口空间。

在 Firefox 和 IE11 中，由于设置了 height:100%，内部元素（id="problem-is-here"）继承其父元素计算出的高度。因此，由于内容太小而无法显示，并且设置了 overflow:auto，所以它（而不是整个 body）会出现垂直滚动条。这正是我想要的。

但是，在 Chrome 中，内部元素渲染时高度足以容纳其所有内容，这比其父元素更高。因此，由于其父元素设置了 overflow:hidden，因此没有滚动条出现，多余内容也无法访问。那么如何在父元素的高度是通过 flexbox 而不是 CSS height 属性确定的情况下，告诉 Chrome 将这个内部元素的高度呈现为最多等于其父元素的高度？请注意，由于我正在处理的应用程序中 flexbox 成员的数量可能会变化，因此我无法为内部 div 或其父元素指定明确的 height 值。

注：我尝试了其他答案中提出的一些建议，例如将所有元素都设置为具有 min-height:0 而不是 auto，或确保将 flex-basis 设置为 0，但这些方法都没有奏效。请参见以下示例以说明该问题。（id="heres-the-problem" 的 div 是我要限制其高度与父元素相同的元素）：http://plnkr.co/edit/UBRcrNmR5iDbn3EXu6FI?p=preview。

- Ajm Iam

这是你要找的吗？http://plnkr.co/edit/lxCkObgKgpEf0GYZbQtx?p=preview 更少的标记和更少的CSS。提示：对于body进行边距重置。 - G-Cyrillus

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Benjamin · Accepted Answer

首先，让我们解决一下术语：

...如何强制一个嵌套在 flexbox 成员内部的元素（通过“flexbox 成员”我指的是使用 display:flex 样式的元素的子元素）将其大小限制为嵌套在其中的 flexbox 成员的大小？

具有 display: flex 样式的元素称为flex 容器（技术上）或flex 父元素（口语）。

flex 容器的子元素称为flex 项目。请注意单词子元素（第一级）。超出子元素的 flex 容器的后代不是 flex 项目，大多数 flex 属性不适用于它们。

现在，回答你的问题：

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

具体来说，Chrome中没有呈现您想要的垂直滚动条，因为您正在以一种与spec的传统实现不符合的方式使用百分比高度。

CSS height属性

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

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

换句话说，如果要使元素具有百分比高度，则必须在包含块（即父级）上指定高度。

在你的代码中，body（第1级）具有height: 100vh。

往下一级，.max-flex（第2级）具有height: 100%。

往下四级，.large-nested-div（第4级）具有height: 100%。

然而，在.variable-flex-content（第3级）处，没有height属性。你正在使用flex: 1 1 0定义高度。就Chrome而言，这是链中缺失的一环，并且违反了规范。Chrome希望看到height属性，当它不存在时，会将高度计算为auto。

Chrome vs Firefox（我没有测试IE11，所以在这里不会提及它）

传统上，在计算百分比高度时，浏览器将规范中“height”一词的使用解释为height属性的值。它也可以被解释为高度（通用术语），但是height属性要求已成为主要实现。我从未见过在处理百分比高度时父元素上的min-height或max-height有效。

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

目前还不清楚哪个浏览器更符合规范。

height属性定义自1998年（CSS2）以来没有更新，这并没有帮助解决问题。

解决方案

不要使用 flex: 1 1 0% 来定义 .variable-flex-content 的高度，尝试使用 height: 100%、height: calc(100% - 60px) 或 absolute positioning。