height vs min-height same value different result

Question

As i understand vh unit is related to view-port not document content.but when i used it with flex container it behave strange like in following example.

1. Run code snippet and open Full page mode.
2. resize browser window height 150px.
3. footer section overflow and we cant see it with scroll.
4. edit .box height:100vh to min-height:100vh.
5. every thing is now fine we can scroll till end no overflow.

now is vh unit with min-height property also respect to document content. while vh unit with height only consider view-port height not document content. what is reason behind it?

note: this happen with flex container not with block formatting also not sure about grid.

code used from following answer on stack-overflow.

html, body {
  margin: 0;
}
.box {
  display: flex;
  flex-direction: column;
  height: 100vh;
  /* if min-height:100vh is used then problem is solved we can fully scroll the box   content and overflow is not happen */
  background-size: cover;
  background: black url(http://lorempixel.com/500/500/nature/4/) no-repeat center;
}
.box .row.content,
.content .one-fifth.column {
  flex: 1;                
  display: flex;
}

.box .row.header,
.box .row.footer { color: white; }
.box .row.content { background: #fff; }
.yellow-back { background: #ffe001; }
.red-back { background: #e31e25; }
.green-back { background: #66af45; }
.purple-back { background: #954294; }

@media screen and (max-width: 600px) {
  /* smaller screens */
  .box .row.content {
    flex-direction: column
  }
}

<div class="box">
  <div class="row header">
    <p><b>header</b><br /><br />(sized to content)</p>
  </div>

  <div class="row content">
    <div class="one-fifth column green-back">Here</div>
    <div class="one-fifth column red-back">Here</div>
    <div class="one-fifth column">Here</div>
    <div class="one-fifth column yellow-back">Here</div>
    <div class="one-fifth column purple-back">Here</div>
  </div>

  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>