flex-grow上flexbox全高，但超过视口高度

Question

我认为我想要的是row3到底部，但是现在我的问题是100vh创建了额外的高度，如何移除到scollbar？我认为逻辑将是100vh-row2 + row1的高度？

#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>