Андрей Федоров

Суть должна быть понятна из примера - https://codepen.io/aliencash/pen/zYWgyrP

Метод .style - задает css свойства и их значение. Соответственно нужно использовать css calc и кастомные свойства css в качестве переменной. При желании вы можете задать значение кастомных свойств через js.

Любые "+12%" - это синтаксический сахар, который вы можете реализовать своими методами в js.

Потому что, чтобы работал скролл, что-то должно не влезать в блок, а у вас его высота определяется от высоты внутреннего содержимого. Ограничьте высоту блока .content и все заработает.

https://jsfiddle.net/0kn5dpe3/1/

https://jsfiddle.net/c7L0ety5/

Один из вариантов - сделать двойной клик - https://codepen.io/aliencash/pen/OJzpOEj

https://codepen.io/aliencash/pen/zYPgeOL

Например - https://codepen.io/aliencash/pen/wvPVmpQ?editors=1100

Можно без js...

body {
   animation: noscroll 3s forwards;
}
@keyframes noscroll {
   from {
      overflow: hidden;
      max-height: 100vh;
   }
   to {
      overflow: unset;
      max-height: unset;
   }
}

https://codepen.io/aliencash/pen/vYWJeVX

https://codepen.io/aliencash/pen/BawbqNp
Во-первых, это свойство действует только на inline элементы.
Во-вторых, ширина элемента должна быть явно ограничена, иначе браузер не поймет где ему обрезать строку.