Chrome中的Flexbox——如何限制嵌套元素的大小？ [复制]

Posted 2023-03-06

【中文标题】Chrome中的Flexbox——如何限制嵌套元素的大小？ [复制]

【英文标题】：Flexbox in Chrome--How to limit size of nested elements? [duplicate]

【发布时间】：2016-02-20 18:10:42

【问题描述】：

在 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 是1，所以它得到了其余的可用空间（在这种情况下，视口的 100% 减去 60 像素）。根据 Inspect Element，我可以确认该元素的尺寸刚好足以占据视口的其余空间。

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

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

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

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

举个例子来说明问题。 （ID 为 heres-the-problem 的 div 是我希望其高度限制在其父级高度的那个。）

【问题讨论】：

这是您要找的吗？ plnkr.co/edit/lxCkObgKgpEf0GYZbQtx?p=preview 更少的标记和更少的 CSS。提示：正文的边距重置

【参考方案1】：

首先，让我们处理一下术语：

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

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

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

---

现在，解决您的问题：

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

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

CSS height property

百分比 指定百分比高度。该百分比是相对于生成框的包含块的高度计算的。如果没有明确指定包含块的高度并且该元素不是绝对定位的，则该值计算为“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 属性要求已成为主要实现。在处理百分比高度时，我从未见过 min-height 或 max-height 在父母身上工作。

然而，最近，正如本问题和 another one 和 another one 中所述，Firefox 已扩大其解释范围以接受 flex 高度。

尚不清楚哪种浏览器更合规。

height 属性定义自 1998 年以来一直没有更新 (CSS2)，这无济于事。

---

解决方案

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

【讨论】：

您关于设置.variable-flex-content 的height 的建议对我不起作用，因为在我正在处理的页面上，flex 元素的总数可以更改，并且静态height并非在所有情况下都有效。但是，将.variable-flex-content 设置为position:relative 并将其子级设置为position:absolute 导致height:100% 以我想要的方式运行。请参阅我更新的 plunk：link。只要.variable-flex-content 只有一个直系子代，它就会产生我需要的行为。

我想的也差不多。我知道您问题的限制，但无论如何我都包含了height 选项，以防它对您或其他人有用。我真正的解决方案是绝对定位。我还打算建议一个嵌套的弹性框和min-height 选项，但不希望答案太长。我很高兴你解决了这个问题。感谢您的反馈。

更多（可能更好）的解决方案在这里：***.com/q/33636796/3597276