如果添加了flex-shrink:0;，它应该会按预期工作（如果flex-shrink没有显式设置，初始值为1）。

<main style="display:flex">
  <div style="flex-basis: 200px; flex-shrink:0; background-color: #eee"></div>
  <div style="flex-basis: 100%;  background-color: #ccc"></div>
</main>

<style>
  main, html, body {
    position:absolute; top:0; left:0; right:0; bottom:0;
    margin: 0;
  }
</style>

<script>
  for (div of document.getElementsByTagName("div"))
    div.innerHTML = "WIDTH=" + div.offsetWidth;
</script>

字符串

您的flex-basis值应该与您希望它们以小于总宽度的宽度显示的*比率相同。如果您希望一个元素增长并填充空间，请为其给予flex-grow: 1;。有关详细信息，请访问此处：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax
下面，元素的宽度将为1:2，直到总宽度为600px，然后第二个元素将填充其上的额外空间：

<main style="display:flex">
  <div style="flex-basis: 200px; background-color: #eee"></div>
  <div style="flex-basis: 400px; flex-grow: 1; background-color: #ccc"></div>
</main>

<style>
  main, html, body {
    position:absolute; top:0; left:0; right:0; bottom:0;
    margin: 0;
  }
</style>

<script>
  for (div of document.getElementsByTagName("div"))
    div.innerHTML = "WIDTH=" + div.offsetWidth;
</script>