最新的Chrome浏览器打破了Flexbox渲染

时间：2019-03-16 09:41:42

标签： css google-chrome flexbox cross-browser

Chrome更新（73.0.3683.75）后，我的Flex渲染已完全损坏。

here和here on SO已知并讨论了该问题，但是由于我不太了解CSS和Flex，所以我无法理解它们的修复方式并使其适合我的情况。 / p>

I made a plunker复制了问题。 如果您使用Safari和Chrome浏览器将其打开，则在调整窗口大小时会注意到非常不同的行为。

我的代码（以前有效）有什么问题？

这里有两个插图：

Safari显示（确定）

如您所见，调整窗口大小时，文章项目的高度会降低，全局高度会保持100％而不会溢出。那是预期的行为。 enter image description here

Chrome显示（不正确）

但是在新的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。

3 个答案:

答案 0 :(得分：1)

尝试：

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

如果将height: 100%更改为height: 100vh，则该问题与使用PreparedStatement有关。

答案 1 :(得分：1)

带有.col的{​​{1}}元素溢出。向该修复程序添加h-100类。

答案 2 :(得分：0)

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

.list-group{
  height:100vh !important; 
}
.list-group-item{
 height:100%;
}
相关问题
最新问题