title: Prevent button from taking up the full width of its container
body: <p>I am using the Material UI button (with customizations in styled-components) in my app. Previously, by passing the size="small" prop to the button, the button was only taking up the width of the button text, plus some padding that I defined. It was doing so even when placed within a Flexbox container I created. However, when I defined a width for that FlexContainer component, the small button increased to 100% of the width of that container. </p>
  
  <p>I don't want to define a default width on the button because it should appropriately size based on the button text. I tried setting "display: inline-flex" on the button itself, but that did not do anything. </p>
  
  <p>Here is the container component (fragment of larger component):</p>
  
  <pre><code>       &lt;RightFields flexDirection="column"&gt;
            &lt;FieldSpacing&gt;
              &lt;PasswordDisplay /&gt;
            &lt;/FieldSpacing&gt;
            &lt;FieldSpacing&gt;
              &lt;PaymentDisplay /&gt;
            &lt;/FieldSpacing&gt;
            &lt;Button pink
              buttonText="Save Changes"
              buttonSize="small"
            /&gt;
          &lt;/RightFields&gt;
  
  
  ...
  
  const RightFields = styled(FlexContainer)`
    width: 321px;
  `
  </code></pre>
  
  <p>Button.js</p>
  
  <pre><code>const Button = ({buttonText, buttonSize, ...props}) =&gt; {
  
    return (
      &lt;&gt;
        {buttonSize === 'large' ?
          &lt;LargeButton
            variant="contained"
            fullWidth={true}
            size="large"
            {...props}
          &gt;
            {buttonText}
          &lt;/LargeButton&gt; :
          &lt;SmallButton
            variant="contained"
            size="small"
            {...props}
          &gt;
            {buttonText}
          &lt;/SmallButton&gt;
        }
      &lt;/&gt;
    )
  
  }
  
  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;
  `
  </code></pre>