flexbox full height on flex-grow but exceeded viewport height

Question

I think what I want is row3 fuild to the bottom but now my problem is the 100vh created extra height, how to remove to the scollbar? I think the logic would be 100vh - row2 + row1 height?

#wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
}

#row1 {
  background: red;
}

#row2 {
  background: pink;
}

#row3 {
  background: brown;
  flex: 1;
}

<div id="wrap">

  <div id="row1">
    row 1
  </div>
  <div id="row2">
    row 2
  </div>
  <div id="row3">
    row 3
  </div>
</div>