Как растянуть элемент #code на оставшуюся ширину?...

.container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}

#code {
    background: red;
    flex-grow: 1;
    /*width: 100%;*/
    height: 100%;
}

Неизвестно полезный CSS

overscroll-behavior: none; - позволяют предотвратить прокрутку родительского блока при достижении конца прокрутки текущего элемента

column-fill: balance; - выравнивает количество контента в столбцах

user-select: all; - позволяет при клике по элементу выделить весь текст внутри него

white-space: pre аналогичен тегу <pre> - сохраняет форматирование(пробелы, переносы и тд)

hyphens: auto - определяет будут ли использованы переносы строк, требует установленного языка через тег lang="ru"

Мои любимые вопросы о CSS с ответами. Версия 2023 года

это может замечательно сработает для одного файла стилей, но если файлов много и подключаются они не в строго определенном порядке, да еще где-то они инлайново в html вставляются в теге style

Оптимизируем изображения в HTML

Простое правило(за редким исключением):
-bg для декора,
-img для контента

Как передавать макеты в разработку?

Есть media queries - -webkit-device-pixel-ratio который позволяет отслеживать устройства с различным количеством точек на пиксель
https://developer.mozilla.org/en-US/docs/Web/CSS@mediaa/-webkit-device-pixel-ratio