Width getting out for the container when using mj-button in mobile preview

[kishanindegene]

This is my code when i am viewing in the mobile preview then the mj-button is overlapping with the image container

<mjml> <mj-body> <mj-section> <mj-group> <mj-column width="20%" background-color="blue"> <mj-text>sadasdasdsad</mj-text> </mj-column> <mj-column width="20%" background-color="red"> <mj-text>sadasdasdsad</mj-text> </mj-column> <mj-column width="20%" background-color="red"> <mj-button>Click Me!</mj-button> </mj-column> <mj-column width="20%" background-color="green"> <mj-image src="https://mjml.io/assets/img/easy-and-quick.png"></mj-image> </mj-column> <mj-column width="20%" background-color="red"> <mj-text>sadasdasdsad</mj-text> </mj-column> </mj-group> </mj-section> </mj-body> </mjml>

Code Link with preview
https://mjml.io/try-it-live/WfpmrRfU3E

[Maxime Brazeilles]

This is the behavior of the HTML here there's nothing MJML can do to prevent this to happen.
If you push too many content in a group with padding it will behave like that. Supporting box-sizing border box would prevent this but it's not supported in email.