Css 防止按钮占据其容器的整个宽度

我正在我的应用程序中使用“材质UI”按钮（在样式化组件中进行自定义）。以前，通过将size=“small”属性传递给按钮，按钮只占用按钮文本的宽度，加上我定义的一些填充。即使将它放在我创建的Flexbox容器中，它也在这样做。但是，当我为FlexContainer组件定义宽度时，小按钮增加到该容器宽度的100%

我不想在按钮上定义默认宽度，因为它应该根据按钮文本适当调整大小。我试着在按钮本身上设置“display:inline flex”，但没有任何效果

以下是容器组件（较大组件的片段）：

...
const RightFields=styled（FlexContainer）`
宽度：321px；
`

Button.js

const Button = ({buttonText, buttonSize, ...props}) => {

  return (
    <>
      {buttonSize === 'large' ?
        <LargeButton
          variant="contained"
          fullWidth={true}
          size="large"
          {...props}
        >
          {buttonText}
        </LargeButton> :
        <SmallButton
          variant="contained"
          size="small"
          {...props}
        >
          {buttonText}
        </SmallButton>
      }
    </>
  )

}

const StyledButton = styled(MaterialButton)`
  ...
  `

const LargeButton = styled(StyledButton)`
  ...
`

const SmallButton = styled(StyledButton)`
  display: inline-flex;
  flex-grow: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 18px;
  border-radius: 16px;
  height: 28px;
  min-width: 50px;
  padding: 0 16px;
`

const-Button=（{buttonText，buttonSize，…props}）=>{
返回(
{按钮大小==='大'？
{buttonText}
:
{buttonText}
}
)
}
const StyledButton=styled（MaterialButton）`
...
`
const LargeButton=styled（StyledButton）`
...
`
const SmallButton=styled（StyledButton）`
显示：内联flex；
flex-grow:0；
字体大小：15px；
字号：500；
线高：18px；
边界半径：16px；
高度：28px；
最小宽度：50px；
填充：0 16px；
`

尝试使用

宽度：自动

const SmallButton = styled(StyledButton)`
  display: inline-flex;
  flex-grow: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 18px;
  border-radius: 16px;
  height: 28px;
  min-width: 50px;
  width: auto;
  padding: 0 16px;
`

这应该只换行到文本。
您能在CodeSandbox中重现问题并提供链接吗？
const SmallButton = styled(StyledButton)`
  display: inline-flex;
  flex-grow: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 18px;
  border-radius: 16px;
  height: 28px;
  min-width: 50px;
  width: auto;
  padding: 0 16px;
`