QR Code Layout using Flexbox

there is no need for explicit width on card img you should use a modern css reset which have img {max-width: 100%; display: block} and that solves the img issue. I know you add the img first and then img didn't respect parent width and get overflowed and you decide explicit width on img tag but the problem is on this reset when you set img max-width property to 100% you have a img which doesn't overflow the parent width if you want more information on this please read : https://stackoverflow.com/questions/38820710/img-max-width-with-percentage-how-does-it-work