Flexbox 渲染被最新的 Chrome 破坏答案

【问题标题】：Flexbox rendering broken with latest ChromeFlexbox 渲染被最新的 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。在我的回答中解释：stackoverflow.com/a/31728799/3597276

标签： css google-chrome flexbox cross-browser

【解决方案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%;
}

【讨论】：

使用标题时不起作用（参见另一个答案）