Как растянуть блок на всю ширину и высоту без скроллбаров на весь экран?

Question

[Gagatyn]

Как можно заметить в jsfiddle, что при растяжении на весь экран появляются скроллбары.
Проблема решается при помощи box-sizing: border-box;, но из-за этого вверстка начинает ехать не туда.
Подскажите, как добиться состояния, чтобы блок .wrapper был по всему экрану без скроллбаров и с отступами?

UPD:

body { 
 display: flex 
}

Ну или

body { 
 display: grid
}

Answer 1

[Ankhena]

Проблема решается при помощи box-sizing: border-box;, но из-за этого вверстка начинает ехать не туда.

Так задавайте его для .wrapper, а не для всех.

p.s. либо задайте для всех (и псевдо не забудьте) и пересчитайте ширину.

Comments

[Gagatyn]

Ох, упустил этот момент, пробовал, но для .wrapper что-то не додумался.

Answer 2

[Воващ]

Если правильно понял, то

Comments

[Gagatyn]

У вас скроллбары справа и снизу.
Вернитесь на 2 версию jsfiddle, расскомментарий box-sizing. Так должно быть.
Там правда console мешает, но не суть.

Answer 3

[Max]

как насчет

html::-webkit-scrollbar {
  width: 0 !important;
}

??
Это просто уберет скроллбары (не все) на странице

Comments

[Gagatyn]

Не, они просто скрываются.
У мозилы, кстати, интересная штука scrollbar-width: thin