Chrome中的Flexbox - 如何限制嵌套元素的大小？ [英] Flexbox in Chrome--How to limit size of nested elements?
问题描述
在Google Chrome中，如何强制嵌套在flexbox成员内部的元素（通过flexbox成员我的意思是用 display：flex ）将其大小限制为嵌套在其下的flexbox成员的大小？例如，假设我有以下：
< div style =display：flex; flex-direction：column; height ：100vh;
< div style =height：60px;>静态标头< / div>
< div style =flex：1 1 0; overflow：hidden;>
< div style =overflow：auto; height：100％; id =problem-is-here>
很多很多内容，方式太多，不适合在视口
< / div>
< / div>
< / div>
因为第一个子 div div 有一个常数高度，它的高度正好为60像素，因为第二个子 div 有一个 flex-grow 为1，它获得剩余的可用空间（在这种情况下，100％的视口减去60px）。
在Firefox和IE11中，由于<$ p> c $ c> height：100％，最内层的元素（ id =problem-is-here父母。因此，由于它太小，无法显示其内容，并且 overflow 设置为 auto body ）获取垂直滚动条。这是我想要的。
然而，在Chrome中，最内层的元素呈现的高度足以包含其所有内容，其高度大于其父元素。因此，因为其父项具有 overflow：hidden ，则不会出现滚动条，并且无法访问多余的内容。当父高度由flexbox而不是CSS height 属性决定时，如何让Chrome渲染这个最内层元素的高度至多等于其父元素的高度？请注意，我不能给最内层的 div 或其父体定义 height
注意：我已经尝试过其他答案的一些建议，例如将所有元素设置为 min-height：0 而不是 auto ，或确保 flex-basis 设置为 0 ，但这些都没有工作。请参阅
http://plnkr.co / edit / UBRcrNmR5iDbn3EXu6FI？p =预览
以示例说明问题。 （ div 与id heres-the-problem 是我想要的高度限制为其父。）
首先，我们来处理这个术语： p>
...如何强制嵌套在flexbox成员内部的元素（通过flexbox的成员我的意思是用
display：flex）样式的元素将其大小限制为嵌套在其下的flexbox成员的大小？
具有 display：flex 的元素称为 flex容器（技术上） / strong>（通俗地）。
flex容器的子项称为 flex项。请注意单词 children （第一级）。
strong> 现在，解决您的问题：
问题是Firefox（显然IE11）
具体来说，您所需的垂直滚动条不会在Chrome中呈现，因为您使用的百分比高度不符合传统实施规范。
>指定百分比高度。相对于生成的框的包含块的高度计算百分比。如果未明确指定包含块的高度，且该元素未绝对定位，则该值计算为auto。
自动
高度取决于其他属性的值。
换句话说，如果您希望元素具有百分比高度，
在你的代码中， body （级别1）具有 height：100vh 。
一级向下， .max-flex （级别2）具有 height：100 ％。
四层以下， .large-nested-div ：100％。
但是，在 .variable-flex-content 3），没有 height 属性。您正在使用 flex：1 1 0 定义高度。就Chrome而言，这是链中缺少的链接，违反了规范。 Chrome希望看到 height 属性，如果没有，则计算高度 auto 。
Chrome vs Firefox 所以我不会在这里提到它）
传统上，当计算百分比高度时，浏览器解释规范使用的术语高度的意思是 height 属性。它可以很容易地解释为高度（通用术语），但 height 属性要求已成为主要的实现。在处理百分比高度时，我从未见过 min-height 或 max-height p>
但是，最近，如本问题和另一个中所述， 另一个，Firefox已扩展其解释以接受 flex 高度，
不清楚哪个浏览器更符合规范。
height 属性定义自1998年以来未更新（ CSS2 ）。
解决方案 >
而不是使用 flex定义，尝试使用 .variable-flex-content 的高度： 1 1 0％ height：100％或 height：calc（100％ - 60px） c $ c>或绝对定位。
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.
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屋！
