Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flexbox rendering broken with latest Chrome

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. enter image description here

Chrome display (NOT OK)

But in new Chrome version, article item height does not change when resizing the window, and a scrollbar is created. 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>

NOTE : does NOT work on latest Firefox too.

like image 833
David D. Avatar asked Mar 16 '19 09:03

David D.


People also ask

Does ie11 support flexbox?

Note also that Internet Explorer 11 supports the modern display: flex specification however it has a number of bugs in the implementation.

Why is flexbox overflowing?

min-width in a flex context: While the default min-width value is 0 (zero), for flex items it is auto . This can make block elements take up much more space than desired, resulting in overflow.

Is CSS flex supported by all browsers?

The flexbox properties are supported in all modern browsers.


2 Answers

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.

like image 140
Steven Kuipers Avatar answered Oct 25 '22 17:10

Steven Kuipers


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

like image 40
JRoss Avatar answered Oct 25 '22 17:10

JRoss