How do you control the initial size of CSS grid elements when elements are resizable?

Question

I have a CSS grid display with vertically resizable elements. For the resizing to work in all my attempts all row grid-templates must be "auto" except for one with a value of "1fr", which is the free floating row. I want this row to start off as the same size as another row, but be able to be resized freely. My problem is that content2 is extremely small on the bottom right pane, requiring the user to always resize it.

EDIT: Below is a fully implemented attempt. How do you get content1 and content2 to start at the same size but still allow resizing?

body {
  margin: 0;
  height: 100%;
}

main {
  height: 100vh;
  display: grid;
  grid-template:
      "topbar topbar" auto
      "sidebar content1" auto
      "sidebar content2" 1fr 
      / 14rem 1fr;
}

nav {
  grid-area: topbar;
  background: green;
}
.sidebar {
  grid-area: sidebar;
  overflow: auto;
  background: pink;
  resize: horizontal;
}
.content1 {
  grid-area: content1;
  overflow: auto;
  resize: vertical;
  background: orange;
  min-height: 10vh;
  max-height: 70vh;
}
.content2 {
  grid-area: content2;
  overflow: auto;
  background: goldenrod;
  min-height: 10vh;
  max-height: 70vh;
}
.filler {
  height: 600px;
}

<main>
  <nav>top</nav>
  <div class="sidebar">sidebar</div>
  <section class="content1">
    Lorem ipsum, dolor sit amet consectetur
    adipisicing elit. Ab, corrupti!
    <div class="filler"></div>
    Bottom
  </section>
  <section class="content2">
      Lorem ipsum, dolor sit amet consectetur
      adipisicing elit.
      <div class="filler"></div>
      Bottom
  </section>
</main>

References:

Dynamically resize columns in css grid layout with mouse