Flexbox 渲染被最新的 Chrome 破坏
Posted
技术标签:
【中文标题】Flexbox 渲染被最新的 Chrome 破坏【英文标题】：Flexbox rendering broken with latest Chrome 【发布时间】：2019-08-07 06:53:56 【问题描述】：在 Chrome 更新 (73.0.3683.75) 后，我的 flex 渲染完全坏了。
这个问题在here 和here on SO 是已知和讨论的，但是我无法理解他们的解决方法并使其适用于我的情况，因为我不太了解 CSS 和 Flex。
I made a plunker 复制了该问题。 如果您使用 Safari 和 Chrome 打开它，您会发现在调整窗口大小时会有非常不同的行为。
我的代码有什么问题（以前有效）？
这里有两个 plunker 的插图：
Safari 显示（确定）
如您所见，在调整窗口大小时，文章项的高度会降低，并且全局高度保持在 100% 而不会溢出。这是预期的行为。
Chrome 显示器（不正常）
但在新的 Chrome 版本中，调整窗口大小时文章项的高度不会改变，并且会创建一个滚动条。
<head>
<link data-require="bootstrap@*" data-semver="4.1.3" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<script data-require="bootstrap@*" data-semver="4.1.3" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="container-fluid h-100 pt-3 pb-3"
style="background-color: green;">
<div class="row h-100">
<div class="col" style="background-color: red;">
<div class="h-100">
<div class="row justify-content-center h-100">
<div class="col u-hide-long-text h-100">
<div class="list-group h-100 list-group-flush">
<a class="list-group-item d-flex align-items-center justify-content-between list-group-item-action">article n°X</a>
<a class="list-group-item d-flex align-items-center justify-content-between list-group-item-action">article n°X</a>
<a class="list-group-item d-flex align-items-center justify-content-between list-group-item-action">article n°X</a>
<a class="list-group-item d-flex align-items-center justify-content-between list-group-item-action">article n°X</a>
<a class="list-group-item d-flex align-items-center justify-content-between list-group-item-action">article n°X</a>
<a class="list-group-item d-flex align-items-center justify-content-between list-group-item-action">article n°X</a>
<a class="list-group-item d-flex align-items-center justify-content-between list-group-item-action">article n°X</a>
<a class="list-group-item d-flex align-items-center justify-content-between list-group-item-action">article n°X</a>
<a class="list-group-item d-flex align-items-center justify-content-between list-group-item-action">article n°X</a>
<a class="list-group-item d-flex align-items-center justify-content-between list-group-item-action">article n°X</a>
<a class="list-group-item d-flex align-items-center justify-content-between list-group-item-action">article n°X</a>
<a class="list-group-item d-flex align-items-center justify-content-between list-group-item-action">article n°X</a>
<a class="list-group-item d-flex align-items-center justify-content-between list-group-item-action">article n°X</a>
<a class="list-group-item d-flex align-items-center justify-content-between list-group-item-action">article n°X</a>
<a class="list-group-item d-flex align-items-center justify-content-between list-group-item-action">article n°X</a>
<a class="list-group-item d-flex align-items-center justify-content-between list-group-item-action">article n°X</a>
<a class="list-group-item d-flex align-items-center justify-content-between list-group-item-action">article n°X</a>
<a class="list-group-item d-flex align-items-center justify-content-between list-group-item-action">article n°X</a>
<a class="list-group-item d-flex align-items-center justify-content-between list-group-item-action">article n°X</a>
<a class="list-group-item d-flex align-items-center justify-content-between list-group-item-action">article n°X</a>
<a class="list-group-item d-flex align-items-center justify-content-between list-group-item-action">article n°X</a>
</div>
</div>
</div>
</div>
</div>
</div
</div>
</body>
</html>
注意：也不适用于最新的 Firefox。
【问题讨论】：
您的链条中缺少一个环节。将height: 100% 或h-100 类添加到.col。在我的回答中解释：***.com/a/31728799/3597276
【参考方案1】：
试试：
.h-100
height: 100vh!important;
问题与使用 height: 100% 有关，如果您将其更改为 height: 100vh，它会产生预期的行为。
【讨论】：
它似乎可以工作，但是，当在 h-10 处添加标题（以及在 h-90 处添加内容）时，结果不是 100% 并且仍然有滚动条。你能看看这个updated plunker吗？谢谢。 我认为这是因为内容中的 h-100 类覆盖了父类的 h-90 类。使用百分比，您可以相对于具有display: relative 的第一个父容器调整大小。 VH 和 VW 是相对于视口的。 `
好的，谢谢你的解释。由于我在项目中使用了大量嵌套的height: x%，我想这次使用vh 会很复杂。不过，我不明白我当前的代码有什么问题。【参考方案2】：
带有background-color: red; 的.col 元素溢出。为该修复添加一个 h-100 类。
【讨论】：
【参考方案3】：在.list-group-item 类上使用height:100%;
.list-group
height:100vh !important;
.list-group-item
height:100%;
【讨论】：
使用标题时不起作用（参见另一个答案）以上是关于Flexbox 渲染被最新的 Chrome 破坏的主要内容，如果未能解决你的问题，请参考以下文章
为啥 chrome 不为嵌入式 Twitter 时间线渲染 flexbox 定位？