Flexbox Child Growing Bigger than Flexbox Problem

If you've ever attempted to create a layout similar to what my website has (assuming you're reading this on desktop), you may have encountered a problem where a Flexbox child, instead of fitting perfectly inside its parent, grows so big that the parent's width also expands, even if a fixed width is set.

Here is a simplified view of what's happening:

The blog is rendered inside the red box, and in the screenshot above, you can observe that the blog is overflowing, causing the entire page to have a horizontal layout. The overflow in the blog is due to a code block with a pre tag containing a very long line of code that extends beyond the page.

One might assume that simply adding

to the code block would fix the issue, or perhaps adding to prevent it from growing larger than its parent. However, both fails to fix this problem.

I've created a CodePen example for you to waste you precious time on this stupid bug: CodePen Example

I've already added

for you. Now, if you're ready (SPOILER ALERT), here is the solution to this problem:

In addition to adding

to the card, I had to include for all of its parent elements, which are direct descendants of a flexbox.

Try adding

to in the CodePen example.

Explanation: I don't know; it's just how CSS works. Adding

prompts CSS to use more brain cells to recognize that a parent with a fixed width and a child with should not grow larger unnecessarily.