Вам дали правильные ответы, но существует еще один.
Вы создаете 2 блока, каждый из них имеет высоту 100% и ширину 50%. С помощью position расстанавливаете их. Так как высота правого блока указана 100%, он не может вылезти за эти рамки, а так как содержимое контента не влазит в предоставленный размер, то блок сам для себя создает скролинг. Именно этот способ и использован на сайте с вашим примером.
На будущее, часто бывает, что любопытно, как построен сайт, в каждом браузере есть такая функция как "Инструменты разработчика"(в хроме он называется именно так, в других браузерах возможно немного меняется название). Заходите в него и можете смотреть как устроен сайт.
<body>
<div class="left">
//здесь размещаете картинку, можно даже самому этому диву назначить ее через background
</div>
<div class="right">
//здесь размещаете информацию
</div>
</body>
.left{position: absolute; left: 0; top: 0; height: 100vh; width: 50%;}
.right{position: absolute; right: 0; top: 0; height: 100vh; width: 50%;}
Простой
Средний