Fix flex padding/margin overflow in Card component

[emmenko]

Describe the bug
The Spacing Card element (which are display: flex) should not have any padding. Instead there should be an inner container that implements the spacing padding or margin.

To Reproduce
I noticed that when implementing the {Info,Confirmation}Dialog (commercetools/merchant-center-application-kit#367, commercetools/merchant-center-application-kit#367).

According to this SO answer (https://stackoverflow.com/a/37785605) this is because of how the calculation of the flex container is done in regards to padding/margin.

Setting the padding/margin to 0 will obviously remove the "overflow".

Expected behavior
The Spacing Card component should not cause overflow on the parent container element.

I would suggest to have a wrapping <div> inside the Card container, where the <div> will set the padding/margin

I can spin up a PR to better illustrate the fix.

[emmenko]

I'm wondering though if it's a general problem or only in the dialog/modal case 🤔

I'll look into it a bit more...

[emmenko]

Wait, I think I got confused. The container I was looking at is the <Card> container, which has the padding. 🤦‍♂️🤦‍♂️🤦‍♂️

I'll find a workaround for now then.

[emmenko]

Actually I think we should fix it in the <Card> component, I don't see other ways around that.