Make flex container take width of content, not width 100%
In the below example, I have a button with the following styles... .button-flexbox-approach { /* other button styles */ display: flex; justify-content: center; align-items: center; padding: 1.5rem 2rem; } http://codepen.io/3stacks/pen/JWErZJ But it automatically scales to 100% instead of the width of the content. You can set an explicit width, but then that doesn't allow your text to wrap naturally. How can I make a button that has the inner text centered with flexbox, but doesn't grow to fit the size of the container? .container { width: 100%; height: 100%; } .button { /* Simply flexing the