Рендеринг Flexbox сломан с последним Chrome - PullRequest
Новая
       27

Рендеринг Flexbox сломан с последним Chrome

9 голосов
/ 16 марта 2019

После обновления Chrome (73.0.3683.75) мой гибкий рендеринг полностью нарушен.

Проблема известна и обсуждается здесь и здесь на SO ,однако я не могу понять их исправление и заставить его работать в моем случае, так как я не очень хорошо знаю CSS и Flex.

Я создал планку , которая повторяет проблему.Если вы откроете его в 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 ]

1 голос
/ 22 марта 2019

Элемент .col с background-color: red; переполнен.Добавьте класс h-100 к этому исправлению.

1 голос
/ 18 марта 2019

Попробуйте: 

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

Проблема связана с использованием height: 100%, если вы измените его на height: 100vh, то это приведет к ожидаемому поведению.

0 голосов
/ 19 марта 2019

использование height:100%; в .list-group-item классе 

.list-group{
  height:100vh !important; 
}
.list-group-item{
 height:100%;
}
...