Медиаобъект Bootstrap 4 с пре внутри не учитывает ширину контейнера

Question

Я поместил медиа-объект внутри столбца начальной загрузки.Если я добавлю <code>...<code> с длинными строками кода в .media-body, целое media object выйдет за границы столбца.

Вот скрипка: https://jsfiddle.net/crazypilot/8dyq4v7x/16/

Помогите мне, пожалуйста!

---

UPD: я хочу иметь горизонтальную прокрутку на этом <code>...<code>, поэтому .mediaне будет переполняться по ширине столбца.

Answer 1

Попробуйте:

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

40px = ширина изображения.

Лучший подход:

.media {
    flex-direction: column;
}

.media-body {
    width: 100%;
}