Высота Flex Div не 100%

Вы можете пройти через Вычисление высоты браузерами: содержащие блоки и дочерние элементы. Очевидно, что height и min-height в CSS не одно и то же.

Измените min-height на height для body и html — см. демонстрацию ниже:

html{
  height: 100%; /* changed to height */
  width: 100%;
}
body{
  height: 100%; /* changed to height */
  width: 100%;
  background-color: green;
}
.main{
  display: flex;
  flex-direction: row;
  min-height: 100%;
  justify-content: space-between;
  background-color: blue;
}

<div class = "main">
  <div>Text 1</div>
  <div>Text 2</div>
</div>

Вы также можете передать height: 100vh элементу main, чтобы установить внутренняя высота для флексбокс — см. демонстрацию ниже:

body{
  margin: 0;
  height: 100vh; /* full viewport height */
  background-color: green;
}
.main{
  display: flex;
  flex-direction: row;
  min-height: 100%;
  justify-content: space-between;
  background-color: blue;
}

<div class = "main">
  <div>Text 1</div>
  <div>Text 2</div>
</div>

Вы можете указать классу .main минимальную высоту 100vh.

.main{
 display: flex;
 flex-direction: row;
 min-height: 100vh;
 justify-content: space-between;
 background-color: blue;
 }

Демо: https://codepen.io/anon/pen/pYKzzM