I have this piece of code which until last week when I was using Chrome 86.x was working fine but now after having updated Chrome, the CSS is a bit off. Currently I'm on Version 92.0.4515.131 of Chrome
On Chrome 86.x and FireFox 90.0.2, there was no gap between the Some Text and Search input. But now on Chrome 92.x there seems to be this space between those two elements.
After inspecting, if I remove the flex-basis of 100% it works and it looks fine on both Chrome 86 and 92. There are several areas of my code, where I seem to be facing this issue and removing the flex-basis everywhere does not seem to be a solution.
Is this a bug on Chrome where it is misinterpreting the flex-basis?
<html lang="en">
<head>
<style type="text/css">
.Wrapper--3Ct6E > div {
height: 100%; }
</style>
</head>
<body>
<div style="display: flex; flex-flow: row nowrap; place-content: stretch space-between; align-items: stretch;">
<div class="Wrapper--3Ct6E">
<div style="display: flex; flex-flow: column nowrap; place-content: stretch flex-start; align-items: stretch;">
<div style="display: flex; flex-flow: column nowrap; place-content: stretch flex-start; align-items: stretch;">
<div style="max-width: 100%; flex: 1 0 100%;">
<div>
<span>Some Text </span>
</div>
</div>
<div>
<input placeholder="Search" type="text" disabled="" value="">
</div>
</div>
</div>
</div>
</div>
</body>
</html>