Why doesn't height: 100% work inside a block with flex-grow in Google Chrome?

Question

css

Actually the question is in the title, here is the codepen .
In Chrome, the .main-wrapper block does not stretch to its full height, in all other browsers it does. What is the problem?
Thank you.

Answer 1

this is a chrome bug, set .main height: 0, should help