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.

article n°X article n°X article n°X article n°X article n°X article n°X article n°X article n°X article n°X article n°X article n°X article n°X article n°X article n°X article n°X article n°X article n°X article n°X article n°X article n°X article n°X

NOTE : does NOT work on latest Firefox too. JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

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