一个非常简单的解决方案是在单词之间使用不间断空格（例如，使用  HTML实体）。

<button>Create&nbsp;user</button>

这样，整个按钮内容将被视为一个单词，必须适合一行，强制元素具有最小宽度。
默认情况下，Flex项目不会缩小到其最小内容大小以下。
演示：https://codesandbox.io/s/cool-archimedes-k1b802?from-embed=&file=/src/App.tsx
另一种可能的解决方案是在<ModalFooter>组件的所有子元素上应用flex-grow: 0;，然后专门针对“Create user”提交按钮，并给予一个覆盖flex-grow: 1;规则：

const ModalFooter = styled.div<{ numberOfButtons?: number }>`
  & > * {
    display: flex;
    flex: 0 0 // flex-grow 0 (first number)
      ${({ numberOfButtons = 2 }) =>
        `calc(100% / ${numberOfButtons} - ${theme.spacing.pixel[100]} * ${
          numberOfButtons - 1
        })`};
  }

  // Specifically target the submit button
  & > button[type=submit] {
    flex-grow: 1; // Override the flex-grow property
  }
`;

<ModalFooter>
  <button>Cancel</button>
  <button type="submit">Create user</button>
</ModalFooter>

演示：https://codesandbox.io/s/admiring-currying-vh0y6n?from-embed=&file=/src/App.tsx
但请注意，flex项随其容器而不是随其自身的内容增长（除了它们的最小大小，如第一个解决方案中所做的那样）。
一个混合的解决方案是在该按钮上应用white-space: nowrap;规则：
隐藏换行符（文字换行）

const ModalFooter = styled.div<{ numberOfButtons?: number }>`
  & > * {
    display: flex;
    flex: 1 0 
      ${({ numberOfButtons = 2 }) =>
        `calc(100% / ${numberOfButtons} - ${theme.spacing.pixel[100]} * ${
          numberOfButtons - 1
        })`};
  }

  // Specifically target the submit button
  & > button[type=submit] {
    white-space: nowrap; // Prevent line breaks on white spaces, like &nbsp;
  }
`;

演示：https://codesandbox.io/s/cool-sea-iwr4iv?from-embed=&file=/src/App.tsx