Menu
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:
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.
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.
833
Note also that Internet Explorer 11 supports the modern display: flex specification however it has a number of bugs in the implementation.
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.
The flexbox properties are supported in all modern browsers.
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.
140
The .col element with background-color: red; is overflowing. Add an h-100 class to that fixes.
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
