Как убрать горизонтальный scrollbar в css grid?

Question

[neulwert]

Я выставил template-areas в общем на 100vh и 100vw, и вроде все хорошо, но как только заполняю блок content случайными словами lorem так чтобы ему пришлось растянуться(выставил свойство auto), то вместе с вертикальной прокруткой появляется горизонтальная прокрутка страницы. Как исправить это безобразие?

Вот код, в нем наглядно видно, что есть горизонтальный scrollbar: https://jsfiddle.net/9wxtofbd/

О причине догадываюсь: появился вертикальный scrollbar и визуальная ширина странички уменьшилась ровно на размер scrollbar'a. Искал в интернете и пробовал использовать max-width(не помогло), пробовал overflow: hidden, но это костыль по-моему, приводящий к другим не нужным последствиям.

Answer 1

[Александр]

grid-template-columns: 20% 60% 20%;
grid-template-columns: 2fr 6fr 2fr;
grid-template-columns: 1fr 3fr 1fr;

Answer 2

[profesor08]

используй 100%, величины вьюпорта можно забыть, итерпретируют их как хотят, и не так как было бы удобно