Flex layout broken with Version 4.5.1

[MBurchard]

The reduced Layout is that...

<div class="h-100">
	<div class="container-fluid h-100 d-flex flex-column">
		<div class="row justify-content-between header">
			<div class="col-sm-9">
				<h3>Customer Identity Management Portal</h3>
			</div>
		</div>
		<div class="row flex-grow-1" style="overflow-y: auto;">
			content area
		</div>
	</div>
</div>

html, body {
	height: 100%;
}

.header {
	background-color: #0078dc;
	box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, .132), 0 1.2px 3.6px 0 rgba(0, 0, 0, .108);
	color: #fff;
	height: 42px;
}

Under Linux Mint with Firefox 79 and Vivaldi 3.1.1929.48 the layout changes between 4.5.0 and 4.5.1. I have not tested it with another OS.

With 4.5.1 the small bar at the top has the height of the full screen and scrollbar appears.

[yoonjs2]

I'm experiencing similar problem after update to 4.5.1. May #30940 causes problem?

[dancarasco]

Can also confirm I'm experiencing this problem. @yoonjs2 I agree that this is the breaking change. Removing the added flex css property addresses the issue. I think #31432 is similar.

[saranglakare]

I am also seeing the same issue with 4.5.1 (Brave on Mac). If I change the flex line from flex: 1 0 100%; to flex: 1 0 0%; it works fine. I hope this change would be reverted - seems like a wrong thing to do.

[mdo]

Reduced this test case further at https://codepen.io/emdeoh/pen/LYNYmPR?editors=1100. Confirming this is an unexpected change. Still investigating and will see what we can do.

[mdo]

If I change the flex line from flex: 1 0 100%; to flex: 1 0 0%; it works fine. I hope this change would be reverted - seems like a wrong thing to do.

FYI, this didn't yield the same results to me as removing the flex line entirely.