This is due to the fact of a (not so?) recent change in collapsing margins. In a block layout, the margin-bottom and margin-top of the heading elements collapses (only one margin is applicable), but in a flex layout, the margins are not collapsed. So, what you see in the flex layout is all the margins accounted for.

Try removing margin-top or margin-bottom for your needs. You can read more about margins here: https://www.joshwcomeau.com/css/rules-of-margin-collapse/ or at mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing