Chrome 中的 Flexbox--如何限制嵌套元素的大小? [英] Flexbox in Chrome--How to limit size of nested elements?

问题描述

在 Google Chrome 中，如何强制嵌套在 flexbox 成员内部的元素(flexbox 成员"是指使用 display:flex 样式的元素的子元素)将其大小限制为嵌套在其下的 flexbox 成员的大小?例如，假设我有以下内容:

<div style="height:60px;">静态标题</div><div style="flex: 1 1 0; overflow:hidden;"><div style="overflow:auto; height:100%;"id="问题是在这里">很多很多内容，太多了，无法适应视口

因为最外面的 div 的第一个子 div 具有恒定的高度，所以它的高度正好是 60px，并且因为第二个子 div> 的 flex-grow 为 1，它获取剩余的可用空间(在这种情况下，100% 的视口减去 60px).我可以确认根据 Inspect Element 这个元素的尺寸刚好足以占据视口空间的其余部分.

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

然而，在 Chrome 中，最内层元素的渲染高度足以包含其所有内容，该高度大于其父元素的高度.因此，由于其父级具有overflow:hidden，因此不会出现滚动条，并且无法访问多余的内容.当父高度由 flexbox 确定而不是 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 是我希望将其高度限制为其父级高度的那个.)

解决方案

首先，让我们解决术语:

<块引用>

...如何强制嵌套在 flexbox 成员内部的元素(flexbox 成员"我的意思是使用 display:flex 样式的元素的子元素)来限制它的大小与其嵌套的 flexbox 成员的大小相同?

具有 display: flex 的元素称为 flex 容器(技术上)或 flex 父项(俗称).

弹性容器的子项称为弹性项目.注意单词children(第一级).超出子项的 flex 容器的后代不是 flex 项，大多数 flex 属性不适用于它们.

<小时>

现在，解决您的问题:

问题在于 Firefox(显然 IE11)对百分比高度规则的解释与 Chrome 不同.

具体来说，您想要的垂直滚动条没有在 Chrome 中呈现，因为您使用的百分比高度不符合 规范.

<块引用>

CSS height 属性

百分比
指定百分比高度.该百分比是根据生成的框的包含块的高度计算的.如果未明确指定包含块的高度并且该元素不是绝对定位，则该值计算为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 在处理百分比高度时对父级起作用.

然而，最近，正如本问题和另一个和另一个，Firefox 已扩大其解释以接受flex 高度.

目前尚不清楚哪个浏览器更符合要求.

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

<小时>

解决方案

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

In Google Chrome, how do I force an element nested inside of a member of a flexbox (by "member of a flexbox" I mean a child of an element styled with display:flex) to limit its size to the size of the flexbox member it's nested under? For example, suppose I have the following:

<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>

Because the first child div of the outermost div has a constant height, it ends up exactly 60px tall, and because the second child div has a flex-grow of 1, it gets the rest of the space available (in this case, 100% of the viewport minus 60px). I can confirm that this element's dimensions according to Inspect Element are just large enough to take up the rest of the viewport space.

In Firefox and IE11, due to the height:100%, the innermost element (id="problem-is-here") takes on the height computed for its parent. Therefore, since it is too small to display its content and overflow is set to auto, it (and not the entire body) gets a vertical scrollbar. This is what I want.

In Chrome, however, the innermost element is rendered with enough height to contain all of its content, which is a larger height than its parent. Thus, because its parent has overflow:hidden, no scrollbar appears and the excess content is inaccessible. How do I tell Chrome to render this innermost element with height at most equal to that of its parent, when the parent height is determined by a flexbox, not a CSS height property? Note that I can't give either the innermost div or its parent a definite height value since in the application I'm working on, the number of other flexbox members can vary.

Note: I have tried a few suggestions from other answers, such as setting all elements to have min-height:0 instead of auto, or ensuring flex-basis is set to 0, but none of these have worked. See

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

for an example that illustrates the problem. (The div with id heres-the-problem is the one whose height I want limited to the height of its parent.)

解决方案

First, let's tackle the terminology:

...how do I force an element nested inside of a member of a flexbox (by "member of a flexbox" I mean a child of an element styled with display:flex) to limit its size to the size of the flexbox member it's nested under?

An element with display: flex is called a flex container (technically) or flex parent (colloquially).

The children of a flex container are called flex items. Note the word children (first-level). Descendents of a flex container beyond the children are not flex items and most flex properties don't apply to them.

---

Now, addressing your question:

The problem is that Firefox (and apparently IE11) have a different interpretation of the percentage height rule than Chrome.

Specifically, the vertical scrollbar you want is not rendering in Chrome because you're using percentage heights in a way that doesn't conform with the traditional implementation of the spec.

CSS height property

percentage
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly and this element is not absolutely positioned, the value computes to "auto".

auto
The height depends on the values of other properties.

In other words, if you want an element to have a percentage height, then you must specify a height on the containing block (i.e. the parent).

In your code, body (level 1) has height: 100vh.

One level down, .max-flex (level 2) has height: 100%.

Four levels down, .large-nested-div (level 4) has height: 100%.

However, at .variable-flex-content (level 3), there is no height property. You are defining the height with flex: 1 1 0. As far as Chrome is concerned, this is a missing link in the chain and a violation of the spec. Chrome is expecting to see the height property, and when it doesn't, it computes the height to auto.

---

Chrome vs Firefox (I haven't tested IE11, so I won't mention it here)

Traditionally, when calculating percentage heights, browsers have interpreted the spec's use of the term "height" to mean the value of the height property. It could just as easily be interpreted as a height (generic term), but the height property requirement has become the predominant implementation. I've never seen min-height or max-height work on a parent when dealing with percentage heights.

Recently, however, as noted in this question and another one and another one, Firefox has broadened its interpretation to accept flex heights, as well.

It's not clear which browser is more compliant.

It doesn't help matters that the height property definition hasn't been updated since 1998 (CSS2).

---

The Solution

Instead of defining the height of .variable-flex-content with flex: 1 1 0%, try using height: 100% or height: calc(100% - 60px) or absolute positioning.

这篇关于Chrome 中的 Flexbox--如何限制嵌套元素的大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！