Есть простой способ получить это, но это не окончательное решение.
Я думаю, тег h2, который говорит нам, что вы хотите получить, может быть удален.
Сначалая удалил в вашем коде все, что на самом деле не нужно:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<!-- left -->
<div class="col-md-4">
<h1 style="color:white;"> I should be fixed and centered</h1>
</div>
<!-- right -->
<div class="col-md-8" style="background-color:green;">
<h1 style="color:white;"> I should be > 100% height, and scrollable</h1>
</div>
</body>
</html>
Следующим шагом было присвоение обоим классам фиксированной позиции, одна слева и одна справа.
быстрое и грязное решение, в то время как «левый div» объявляется с «overflow: hidden», а «правый div» с «overlflow: auto».
* {
margin : 0;
padding : 0;
}
body {
color : #000;
font-family : verdana, sans-serif;
}
p {
padding : 1%;
}
.col-md-4 {
position : fixed;
left : 0;
top : 0;
width : 30%;
height : 100%;
background : #ccc;
overflow : hidden;
}
.col-md-8 {
position : fixed;
right : 0;
top : 0;
width : 70%;
height : 100%;
overflow : auto;
}
Вот скрипка, которая доказывает, что это решениевсе еще работает: https://jsfiddle.net/Thorske/5tqLpfjy/1/
И снимок экрана локального теста, который не будет генерировать две полосы прокрутки: 
И еще один, чтобы доказать, что "все«Это должно и не должно прокручиваться, как хотелось бы: 
Но я должен признать, что это не лучший способ получить это.
Редактировать
Я обновил скрипку, чтобы даже сделать этот пример простым, отзывчивым и содержимое левого div по вертикали по центру.
Измененный html:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</head>
<body>
<!-- left -->
<div class="col-md-4">
<h1 style="color:white;"> I should be fixed and centered</h1>
</div>
<!-- right -->
<div class="col-md-8" style="background-color:green;">
<h1 style="color:white;"> I should be > 100% height, and scrollable</h1>
</div>
</body>
</html>
Измененный css:
* {
margin : 0;
padding : 0;
}
body {
color : #000;
font-family : verdana, sans-serif;
}
p {
padding : 1%;
}
@media screen and (min-width:1024px) {
.col-md-4 {
position : fixed;
left : 0;
top : 0;
width : 30%;
height : 100%;
display: flex;
align-items: center;
text-align : center;
justify-content: center;
background : #ccc;
overflow : hidden;
}
.col-md-8 {
position : fixed;
right : 0;
top : 0;
width : 70%;
height : 100%;
overflow : auto;
}
}
@media screen and (max-width:1023px) {
.col-md-4 {
float : left;
width : 100%;
display: flex;
align-items: center;
text-align : center;
justify-content: center;
background : #ccc;
overflow : hidden;
}
.col-md-8 {
float : left;
width : 100%;
}
}
Это может быть только пример, но он все еще работает хорошо, я действительно не так сильно меняюсь, чтобы сделать вещиwork.
Медиа-запросы выполнят свою работу, но я бы порекомендовал определить их более «определенным» образом.
Чтобы выровнять все по левому краю, я добавил только 4 строки кода:
display: flex;
align-items: center;
text-align : center;
justify-content: center;
Обновленная скрипка: https://jsfiddle.net/Thorske/5tqLpfjy/11/