关键词：
【中文标题】Flex 高度在 Chrome 中不起作用 [重复]【英文标题】：Flex height not working in Chrome [duplicate] 【发布时间】：2016-05-28 06:12:10 【问题描述】：为了更好地查看问题在 Firefox 和 chrome 上运行在 html 代码下方并查看差异。
该代码适用于所有浏览器，但不适用于 Chrome。问题是当您将显示设置为flex 和flex-direction 设置为column，并将其中一个弹性项目flex-grow 设置为1。此弹性项目的内容不能将高度设置为100%。
你能在不使用 JavaScript 或 css Calc 函数的情况下帮助我解决问题吗？ 因为在实际项目中，事情比这复杂得多。
h1
margin: 0;
padding: 0;
color: white;
div
font-size: 38px;
color: white;
<body style="margin: 0; padding: 0;">
<div style="height: 100vh; background: royalblue;">
<div style="display: flex; flex-direction: column; height: 100%;">
<div style="background: rosybrown; flex-grow: 0;">
This is first flex item
</div>
<div style="flex-grow: 1; background-color: red;">
<div style="background-color: orange; height: 100%;">
This div is inside flex item that grows to fill the remaining space. and has css height 100% but its not filling its parent.
<br/>this div need to be filling its parent (the red div). this works on all other browsers.
</div>
</div>
</div>
</div>
</body>【问题讨论】：
这个答案可能会对您有所帮助（请参阅要点 #3）：***.com/a/35051529/3597276 我展示的问题与 flex 布局本身无关。因为 flex 容器和它的 flex 项工作正常，但问题在于 flex-grow 设置为 1 的 flex 项的内容。 我刚刚再次阅读了您的问题，查看了您的代码，并阅读了您演示中的文字。这个问题似乎正是我上面的回答所暗示的。将height: 100%添加到橙色div的父级，它就可以工作了。
是的，我知道你在说什么我测试了这个解决方案。但正如我所说，如果有办法不使用 calc 或 javaScript。因为带有 flex-grow:0 的弹性项目；在实际项目中不是固定高度。
没有calc 或javascript。只是一个纯 CSS height 声明，Chrome 需要它来识别孩子的百分比高度。
【参考方案1】：
将height: 100%添加到橙色div的父级：
<div style="flex-grow: 1; background-color: red; height: 100%;"><!-- ADJUSTMENT HERE -->
<div style="background-color: orange; height: 100%;">
This div is inside flex item that grows to fill the remaining space.
and has css height 100% but its not filling its parent.
<br/>this div need to be filling its parent (the red div).
this works on all other browsers.
</div>
</div>
基本上，Chrome 和 Safari 会根据父级的 height 属性的值来解析百分比高度。 Firefox 和 IE11/Edge 使用父级计算的弹性高度。有关更多详细信息，请参阅此答案中的第 3 点：https://***.com/a/35051529/3597276
【讨论】：
非常感谢您抽出宝贵的时间。如果可以滚动，则接受此解决方案。在我的情况下，它不允许滚动。我使用高度 100% 它会将其设置为其父高度的 100% 总高度将为 100% 父级 + 固定高度行，这种情况下，如果您在编辑时运行我的代码，它将滚动。 我明白了。不幸的是，并非所有浏览器都将 flex height 视为具有百分比高度的孩子的参考。flexbox中的图像高度在IE中不起作用
】flexbox中的图像高度在IE中不起作用【英文标题】：ImageheightinflexboxnotworkinginIE【发布时间】：2016-11-2018:39:34【问题描述】：我有一个flex“行”，其中包含5个flex“单元格”，其中包含一个应该在中间对齐的图像。它在Chrome和Firef... 查看详情
flex 属性在 IE 中不起作用
...en获取了一个非常简单的flexbox布局，并粘贴了以下信息。Chrome按预期工作；IE11失败。在Chrome上运行的布局成功图：IE11布局失败的图片bodybackground:#333;fo 查看详情
我需要更换在 safari 中不起作用的 flex gap [重复]
】我需要更换在safari中不起作用的flexgap[重复]【英文标题】：Ineedtoreplaceflexgapwhichdoesn\'tworkinsafari[duplicate]【发布时间】：2021-08-1520:17:14【问题描述】：我需要为safari重写flexgap。我有1个块，在这个块内我放了3个输入元素[输入][输... 查看详情
宽度 100% 和高度 100% 在 chrome 中不起作用
】宽度100%和高度100%在chrome中不起作用【英文标题】：Width100%andheight100%notworkinginchrome【发布时间】：2019-03-0823:11:04【问题描述】：我不太了解数组，我需要创建一个“歌曲数组”类型的变量，然后将其初始化为一个新数组，以便... 查看详情
堆叠的 flexbox 垂直居中在 chrome 中不起作用
】堆叠的flexbox垂直居中在chrome中不起作用【英文标题】：Stackedflexboxverticalcenteringnotworkinginchrome【发布时间】：2015-03-1422:40:42【问题描述】：以下情况在谷歌浏览器中不起作用；<divclass="flex-container"><divclass="flex-item"><di... 查看详情
嵌套的 Flexbox 100% 高度在 Safari 中不起作用 [重复]
】嵌套的Flexbox100%高度在Safari中不起作用[重复]【英文标题】：NestedFlexbox100%HeightNotWorkinginSafari[duplicate]【发布时间】：2015-10-0323:02:44【问题描述】：我是Flexbox的新手，我正在尝试使用它来创建具有固定页眉、固定页脚和填充页眉... 查看详情
边距顶部/底部百分比在 Firefox 中不起作用 [重复]
】边距顶部/底部百分比在Firefox中不起作用[重复]【英文标题】：margin-top/bottom%notworksinfirefox[duplicate]【发布时间】：2018-01-0107:07:06【问题描述】：我有2个div在flex中排列列，我想要它们的距离=1%，这是我的代码：<divclass="container... 查看详情
CSS列表悬停在Google Chrome中不起作用[重复]
】CSS列表悬停在GoogleChrome中不起作用[重复]【英文标题】：CSSlisthoveringnotworkinginGoogleChrome[duplicate]【发布时间】：2016-05-1600:36:36【问题描述】：我有一个HTML列表，当鼠标悬停在每个列表项上时，文本和项目符号都会改变颜色。HTML... 查看详情
CSS3 calc(100%-88px) 在 Chrome 中不起作用 [重复]
】CSS3calc(100%-88px)在Chrome中不起作用[重复]【英文标题】：CSS3calc(100%-88px)notworkinginChrome[duplicate]【发布时间】：2013-04-2320:11:00【问题描述】：我注意到我使用CSS3calc()函数作为width的单位在最新版本的Chrome中不起作用。在Chrome开发者... 查看详情
Flex wrap 在 IE11 的 td 标签中不起作用
...E11【发布时间】：2021-07-1007:00:13【问题描述】：此标记在Chrome中按预期工作。我可以使用css使其在IE11中工作吗？<table><tr><td><divstyle="display:flex;justify-content:space-aro 查看详情
元素上的悬停效果在 CSS 中不起作用 [重复]
】元素上的悬停效果在CSS中不起作用[重复]【英文标题】：HovereffectonelementisnotworkinginCSS[duplicate]【发布时间】：2021-01-1819:18:19【问题描述】：当我将鼠标悬停在box1上时，我试图更改box2的颜色，但它不起作用。请帮助我为什么这... 查看详情
Flexbox 在 Safari 中不起作用
...描述】：我正在创建的布局在Safari中无法运行，尽管它在Chrome中运行良好。我感觉它与.wrapper或.frame有关，但我尝试将FlexShrink值设置为0无济于事。JSFiddle.framedisplay:-webkit-flex;display:-ms-flex 查看详情
设置表格的 td 高度在 Firefox 中不起作用
】设置表格的td高度在Firefox中不起作用【英文标题】：Settingatable\'stdheightnotworkinginFirefox【发布时间】：2018-11-2513:45:40【问题描述】：我有一个表格，其中的单元格内容完全填满了它们。我给内容一个固定的宽度和100%的height，这... 查看详情
为啥 jQuery 在 Chrome 用户脚本 (Greasemonkey) 中不起作用？ [复制]
】为啥jQuery在Chrome用户脚本(Greasemonkey)中不起作用？[复制]【英文标题】：Whydoesn\'tjQueryworkinChromeuserscripts(Greasemonkey)?[duplicate]为什么jQuery在Chrome用户脚本(Greasemonkey)中不起作用？[复制]【发布时间】：2011-02-0500:30:24【问题描述】：... 查看详情
位置粘性在IE中不起作用[重复]
...ion:fixed。当页面到达底部时，它将变为position:sticky。它在chrome和firefox中运行良好。但不能在IE11中工作。即使到达页脚后仍保持为position:fixed。我认 查看详情
CSS Grid 在 Firefox 和 Safari 中不起作用 [重复]
...，但它在Firefox中不起作用。Firefox和Safari都存在显示网格高度的问题。它们导致0或1px。为了解决这个问 查看详情
为啥 flex 属性在反应样式的组件中不起作用？
】为啥flex属性在反应样式的组件中不起作用？【英文标题】：whyisnttheflexattributeworkinginreactstyledcomponents?为什么flex属性在反应样式的组件中不起作用？【发布时间】：2022-01-1311:28:54【问题描述】：好的，所以我的代码一点也不复... 查看详情
CSS flexbox 在 IE10 中不起作用
】CSSflexbox在IE10中不起作用【英文标题】：CSSflexboxnotworkinginIE10【发布时间】：2013-08-0321:00:03【问题描述】：在IE10中，此代码无法正常工作：.flexboxformdisplay:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;-webkit-flex-direc... 查看详情