Есть таблица 3х3 с width: 100% в которой в центральной ячейке выводится контент, он произвольный и должен иметь возможность растягивать таблицу по высоте как угодно, и по ширине, но только да максимума и не в ущерб левому и правому столбцам, потому что левый и правый столбцы отведены под иконки фиксированного размера (для td угловых ячеек прописан width: 30px). Всё нормально пока в центральную ячейку не начнёшь выводить элементы xmp (они нужны для вывода исходного кода), ширина которых должна быть максимальной, а при превышении размера должна появляться полоса прокрутки. Их стиль задан так:
xmp {
font-family: monospace;
overflow: auto;
width: 100%;
}
Так вот width: 100% не срабатывает и эти xmp растягивают среднюю ячейку таблицы так, что сжимаются до нуля боковые столбцы у которых ширина вроде как задано жёстко.
Как избежать растяжения таблицы и схлопывния боковых столбцов? При этом нужно сохранить нахождение таблицы в потоке, я не могу позиционировать её абсолютно, так же нужно сохранить в потоке блоки xmp, я знаю, что если обернуть их в блок с position: relative а им дать position: absolute то проблема с их шириной будет решена и они реально будут занимать столько сколько есть места в ячейчке и не больше но тогда появляется проблема с выпадением xmp из потока - он выводится поверх текста, что идёт за ним.
вот пример кода с проблемой
https://jsfiddle.net/ua1epo7v/1/ 
Простой
