Как сделать так, чтобы пре / кодовые теги переносились на всю высоту контейнера?

Question

Я показываю какой-то необработанный код HTML на своем веб-сайте, используя теги pre и code. Однако я хотел бы изменить его так, чтобы код обернул и заполнил всю высоту контейнера, а не был одной строкой с overflow:auto.

Как мне сделать sh это?

.code-container {
  width: 300px;
  height: 800px;
  background: #e6e6e6;
}

pre {
  overflow: auto;
}

<div class="code-container">
    <pre><code>&lt;img src="https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=12&center=Chicago&format=png&style=feature:road.highway%7Celement:geometry%7Cvisibility:simplified%7Ccolor:0xc280e9&style=feature:transit.line%7Cvisibility:simplified%7Ccolor:0xbababa&style=feature:road.highway%7Celement:labels.text.stroke%7Cvisibility:on%7Ccolor:0xb06eba&style=feature:road.highway%7Celement:labels.text.fill%7Cvisibility:on%7Ccolor:0xffffff&key=YOUR_API_KEY /&gt;

Answer 1

Вы можете добавить свойства пробела и разрыва слова к высоте до + 100%, чтобы переполнение работало.

pre {
  height: 100%;
  overflow: auto;
  white-space: normal;
  word-break: break-all;
}