如果我在增加flex-grow的值后减小它的值，Chrome将使项目变大而不是变小。
您可以在https://gb.cs.unc.edu/~gb/tmp/bug.html上看到一个示例页面。我还将包括下面的代码。
我已经在jsbin上添加了Javascript来增加和减少flex-grow https://output.jsbin.com/puqolal/3
如果你在那个页面上打开devtools，并增加div.choose-one上flex-grow的值，按钮就会增长。但当你降低价值时，它们会继续增长。似乎不可能复位到原始状态。
我，当然，调整Javascript的值，而不是devtools，但我试图尽量减少所涉及的代码。
它在Firefox上呈现出我所期望的效果。我已经报告了这是一个潜在的Chrome错误，但我想找到一个工作，直到他们修复它。
我在Ubuntu 20.04.3 LTS上使用ChromeVersion 93.0.4577.82 (Official Build) (64-bit)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Flex bug?</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
width: 100vw;
}
div.choose-one {
display: flex;
flex-grow: 1;
}
div.hstack {
display: flex;
flex: 1;
height: 100%;
}
div.vstack {
display: flex;
flex: 1;
width: 100%;
flex-direction: column;
}
fieldset {
display: flex;
flex: 1;
}
button {
flex: 1;
}
</style>
</head>
<body>
<div class="hstack">
<div class="vstack">
<div class="choose-one" style="flex-grow: 1">
<fieldset>
<button>Me</button>
</fieldset>
</div>
<div class="choose-one">
<fieldset>
<button>Present</button>
</fieldset>
</div>
</div>
</div>
</body>
</html>
添加width: 100%;高度:100%;到字段集CSS，它按预期工作。
我仍然认为这是Chrome的一个bug，但这是一个解决方案。