logo标签列表

最新版的Chrome中Flexbox渲染出现问题

cssgoogle-chromeflexboxcross-browser
12
在Chrome更新（73.0.3683.75）后，我的弹性布局完全崩溃了。
已知并讨论了该问题此处和这里 SO 上, 但我不懂 CSS 和 Flex 很好，无法理解它们的修复方法并使其在我的情况下起作用。
我创建了一个 Plunker(代码仓库网站), 重现了此问题。如果您在 Safari 中打开它，然后在 Chrome 中打开它，缩放窗口时会注意到非常不同的行为。
我的代码有什么问题 （之前是可以工作的）？
以下是 Plunker 的两个演示：

Safari 显示 (OK)

如您所见，当调整窗口大小时，文章项高度会减小，而全局高度保持在 100％ ，没有溢出。 这是预期行为。 enter image description here

Chrome 显示 (NOT OK)

但在新版Chrome中，当调整窗口大小时，文章项高度不会改变，并且会创建一个滚动条。 enter image description here 
  <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 也无法正常运行。

1
你的链条中缺少一环。在 .col 中添加 height: 100% 或类 h-100。在我这里解释：https://dev59.com/51wZ5IYBdhLWcg3wM97Z#31728799 - Michael Benjamin
3个回答
1
.col 元素使用 background-color: red; 造成溢出。添加一个修复的 h-100 类。
1
尝试：

.h-100 {
    height: 100vh!important;
}

这个问题与使用height: 100%有关，如果将其更改为height: 100vh，它会产生预期的行为。
看起来它可以工作，但是当在h-10处添加标题（并在h-90处添加内容）时，结果不是100％，仍然有滚动条。你能看一下这个更新的plunker吗？谢谢。 - David Dahan
我认为这是因为内容中的h-100类覆盖了父级的h-90类。使用百分比，你可以相对于第一个具有“display: relative”的父容器进行大小调整。VH和VW相对于视口。 - Steven Kuipers
好的，感谢您的解释。由于我在项目中使用了许多嵌套的 height: x%，所以我想这次使用 vh 会很复杂。但是，我仍然不明白我的当前代码有什么问题。 - David Dahan
0

在.list-group-item类上使用height:100%;

.list-group{
  height:100vh !important; 
}
.list-group-item{
 height:100%;
}
当使用标题时它无法工作（参见其他答案）。 - David Dahan
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接