Html Chrome中的Flexbox——如何限制嵌套元素的大小？_Html_Css_Google Chrome_Flexbox

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

html css google-chrome

Html Chrome中的Flexbox——如何限制嵌套元素的大小？,html,css,google-chrome,flexbox,Html,Css,Google Chrome,Flexbox,在Google Chrome中，如何强制嵌套在flexbox成员内部的元素（我所说的“flexbox成员”是指使用display:flex）样式的元素的子元素）将其大小限制为其嵌套的flexbox成员的大小？例如，假设我有以下内容： <div style="display:flex; flex-direction:column; height:100vh;"> <div style="height:60px;">Static header</div>

在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%减去60px）。根据Inspect元素，我可以确认该元素的尺寸是否足够大，足以占据视口的其余空间

在Firefox和IE11中，由于

高度：100%

，最里面的元素（

id=“problem is here”

）采用为其父元素计算的高度。因此，由于它太小，无法显示其内容，并且

溢出

设置为

自动

，因此它（而不是整个

正文

）会获得一个垂直滚动条。这就是我想要的

然而，在Chrome中，最里面的元素的渲染高度足以包含其所有内容，这比其父元素的高度要大。因此，由于其父对象具有

溢出：隐藏

，因此不会显示滚动条，并且无法访问多余的内容。当父元素高度由flexbox而不是CSS

height

属性确定时，我如何告诉Chrome渲染这个最里面的元素，使其高度最多等于其父元素的高度？请注意，我不能给最里面的

div

或其父对象一个明确的

height

值，因为在我正在处理的应用程序中，其他flexbox成员的数量可能会有所不同

注意：我尝试了其他答案中的一些建议，例如将所有元素设置为

min height:0

而不是

auto

，或者确保

flex basis

设置为

，但这些都不起作用。看

举个例子来说明这个问题。（id为

的div
这里的问题是，我希望将其高度限制为其父级的高度。）
首先，让我们讨论一下术语：
…如何强制嵌套在flexbox成员内部的元素（所谓“flexbox成员”，我指的是使用display:flex
）设置样式的元素的子元素）将其大小限制为其嵌套的flexbox成员的大小
具有display:flex
的元素称为flex容器（技术上）或flex父元素（口语上）
flex容器的子项称为flex项。注意单词children（第一级）。子容器之外的flex容器的后代不是flex项，大多数flex属性不适用于它们

现在，回答您的问题：
问题在于Firefox（显然还有IE11）对高度百分比规则的解释与Chrome不同
具体地说，您想要的垂直滚动条不是在Chrome中渲染的，因为您使用的百分比高度不符合

百分比
指定百分比高度。百分比是根据生成的长方体包含块的高度计算的。如果未明确指定包含块的高度，且该元素未绝对定位，则该值将计算为“自动”
自动
高度取决于其他属性的值
换句话说，如果希望元素具有百分比高度，则必须在包含块（即父块）上指定高度
在您的代码中，body
（级别1）具有高度：100vh

向下一级，.max flex
（2级）的高度为100%

向下四层，
。大型嵌套div
（第4层）具有
高度：100%
但是，在
.variable flex content
（级别3）中，没有
height
属性。您正在使用
flex:1 0
定义高度。就Chrome而言，这是链中缺失的一个环节，违反了规范。Chrome希望看到
height
属性，如果没有，它会将高度计算为
auto

Chrome vs Firefox（我还没有测试过IE11，所以这里不提它）
传统上，在计算百分比高度时，浏览器将规范中使用的术语“高度”解释为表示
height
属性的值。它可以很容易地解释为高度（通用术语），但是
高度属性需求已经成为主要的实现。我从未见过min height 或max height 在处理百分比高度时对父母起作用然而，最近，正如在这个问题和中所指出的，Firefox已经扩展了它的解释，也接受了flex heights 目前还不清楚哪个浏览器更兼容自1998年以来，height 属性定义一直没有更新（）解决方案不要用flex:1 10% 定义.variable flex content 的高度，而是尝试使用height:100% 或height:calc（100%-60px）或。这是您想要的吗？更少的标记和更少的css。提示：车身边距重置您关于设置的高度的建议。可变弹性内容将不适用