Flexbox rendering broken with latest Chrome

Question

After a Chrome update (73.0.3683.75), my flex rendering is completely broken.

The issue is known and discussed here and here on SO, however I can't understand their fix and make it work in my case, as I don't know CSS and Flex very well.

I made a plunker that replicates the issue. If you open it with Safari, then Chrome, you'll notice a very different behaviour when resizing the window.

What is wrong with my code (that worked before)?

Here are two illustrations of the plunker:

Safari display (OK)

As you can see, when resizing the window, article items height is decreased and the global height stays at 100% without overflow. That's the expected behaviour.

Chrome display (NOT OK)

But in new Chrome version, article item height does not change when resizing the window, and a scrollbar is created.

  <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>

NOTE : does NOT work on latest Firefox too.

You have a missing link in the chain. Add `height: 100%` or class `h-100` to `.col`. Explained in my answer here: https://stackoverflow.com/a/31728799/3597276 — Michael Benjamin, Mar 19 '19 at 17:16

score 1 · Answer 1 · answered Mar 18 '19 at 12:55

1

Try:

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

The issue has something to do with using height: 100% if you change it to height: 100vh it produces the expected behavior.

answered Mar 18 '19 at 12:55

Steven Kuipers

809
7
19

It seems to work, however, when adding a header at h-10 (and content at h-90), the result is not 100% and there is still a scroll bar. Can you take a look at this [updated plunker](https://plnkr.co/edit/59lrgj4Jatm9eQkN47f4?p=preview&preview)? Thanks. – David Dahan Mar 18 '19 at 13:28
I believe that is because the h-100 classes in content override the h-90 class of the parent. With percentages, you can size relative to the first parent container that has `display: relative`. VH and VW are relative to the viewport. ` – Steven Kuipers Mar 18 '19 at 13:55
Ok thanks for the explanation. As I'm using lots of nested `height: x%` in my project, I guess it will be complicated to use `vh` this time. Still, I don't understand what's wrong with my current code. – David Dahan Mar 18 '19 at 14:01

score 1 · Answer 2 · answered Mar 22 '19 at 14:03

1

The .col element with background-color: red; is overflowing. Add an h-100 class to that fixes.

answered Mar 22 '19 at 14:03

JRoss

1,375
10
19

score 0 · Answer 3 · answered Mar 19 '19 at 04:45

0

use height:100%; on .list-group-item class

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

answered Mar 19 '19 at 04:45

Imon

659
1
4
11

It does not work when using a header (cf. the other answer) – David Dahan Mar 19 '19 at 09:06

Flexbox rendering broken with latest Chrome

Safari display (OK)

Chrome display (NOT OK)

3 Answers3