Bootstrap 4's media object with pre inside doesn't respect container's width

Question

I placed media object inside bootstrap's column. If I put <pre><code>...<code></pre> with long strings of code into .media-body, whole media object goes outside column's borders.

Here's fiddle: https://jsfiddle.net/crazypilot/8dyq4v7x/16/

Help me, please!

---

UPD: I want to have horizontal scroll on that <pre><code>...<code></pre>, so .media will not overflow on the column's width.

Answer 1

Try this:

.media-body {
    width: calc(100% - 40px);
}

40px = width of image.

Better approach:

.media {
    flex-direction: column;
}

.media-body {
    width: 100%;
}