Having an issue with content with floated images and text that is now deep inside a flex container (wasn't in previous site). See here for example:

Problem is that would require us to go through all the content to make this change. I've tried to reproduce this on CodePen but with a simple layout it doesn't happen. Must be something to do with the more complex layout of a real page. I've tried everything I can think of and have found but nothing other than using margin instead of padding fixes it.

Can anyone see a way to fix this flex bug with CSS rather then having to change all the content to workaround it?

Yes there are better ways to lay out the content but what's been done is what worked perfectly well before and suits the skills of staff that manage the content day-to-day.

CodePudding user response：

@Adam Because there is box-sizing property applied by default. So in this case you can initialize image box-sizing: initial; by adding css for images.

so this will help you.

.category-below-description img {
    box-sizing: initial;
}