Foundation-sites: [Input Group] Flexbox input group overflows the width of parent containers

[johnbacon]

The flexbox input group overflows the width of any parent container that is smaller than the input group thinks it should be.

Desired behavior (max-width: 120px;):

Actual behavior (max-width: 120px;):

Here is a Codepen that demonstrates the issue and includes a fix: http://codepen.io/johnbacon/pen/xOKdNG

The root cause is the width: auto that was applied to the flexbox-based .input-group-field in this commit. I'm not sure sure why it was there (if it was done for a reason), so I don't feel comfortable submitting a pull request without further testing. However, removing the width: auto; appears to to fix the issue.

[OverFlow636]

I stumbled on this issue as well. However its not just max-width that it overflows, it will overflow any parent that is smaller than it thinks it needs to be.

http://codepen.io/OverFlow636/pen/zBajyo

[johnbacon]

Thanks for the update on this, @OverFlow636. I've modified the title and content of the issue to match.

[kball]

Fixed via #8907, will be in 6.2.4