Why would the overflow property on a flex item affect its flex-shrink behavior?

Question

I am creating a layout that contains three parts: sidebar (left), page (center), and summary (right). The left will remain fixed at the width of its inner content when the viewport width decreases, which is the expected behavior.

However, once I add overflow-y: auto to the left container, it loses respect for its inner content width, and completely shrinks along with the viewport width.

How does overflow-y: auto affect an item's flex-shrink behavior? How do I apply an overflow-y while allowing it to continue respecting its inner content width?

.root {
  display: flex;
}
.root .sidebar {
  border: 8px solid red;
  flex: 2;
  background: #f3f3f5;
  height: 100vh;
  display: flex;
  justify-content: flex-end;
  padding-top: 80px;
  position: sticky;
  top: 0;
  
  /*
  enable this and shrink the viewport
  notice how the sidebar shrinks completely 
  and no longer respects the inner content's fixed width
  */
    
  /*overflow-y: auto;*/
}
.root .page {
  border: 8px solid green;
  flex: 8;
  max-width: 810px;
  padding: 80px 80px 160px 80px;
}
@media only screen and (max-width: 1024px) {
  .root .page {
    padding-right: 40px;
    padding-left: 40px;
  }
}
.root .summary {
  border: 8px solid blue;
  flex: 2;
  padding-top: 160px;
  position: sticky;
  top: 0;
  align-self: flex-start;
}
.root .actions {
  border: 8px solid orange;
  position: fixed;
  bottom: 0;
  padding: 10px;
  width: 100%;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.root .actions .inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-basis: 650px;
}
.root .stepper {
  border: 4px solid #333;
  flex-basis: 320px;
}
.root .stepper .step {
  display: flex;
  align-items: center;
  margin: 0px 70px 40px 40px;
  white-space: nowrap;
}
.root .stepper .step .circle {
  background: #ffc2d4;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}
.root .form-stuff {
  margin-bottom: 80px;
}
.root .card {
  border: 4px solid #333;
  align-self: flex-start;
  border-radius: 8px;
  padding: 10px;
  max-width: 280px;
  min-width: 180px;
  white-space: nowrap;
}
.root .card .title {
  margin: 20px 0;
}
.root .card .subtitle {
  margin: 20px 0;
  font-size: 14px;
}
.root .button {
  background: #ffc2d4;
  padding: 10px 20px;
}

* {
  box-sizing: border-box;
}

<div class="root">
  <div class="sidebar">
    <div class="stepper">
      <div class="step">
        <div class="circle">
          1
        </div>
        <div class="title">Step 1</div>
      </div>
      <div class="step">
        <div class="circle">
          2
        </div>
        <div class="title">Step 2</div>
      </div>
      <div class="step">
        <div class="circle">
          3
        </div>
        <div class="title">Step 3</div>
      </div>
      <div class="step">
        <div class="circle">
          4
        </div>
        <div class="title">Step 4</div>
      </div><div class="step">
        <div class="circle">
          4
        </div>
        <div class="title">Step 4</div>
      </div><div class="step">
        <div class="circle">
          4
        </div>
        <div class="title">Step 4</div>
      </div><div class="step">
        <div class="circle">
          4
        </div>
        <div class="title">Step 4</div>
      </div><div class="step">
        <div class="circle">
          4
        </div>
        <div class="title">Step 4</div>
      </div><div class="step">
        <div class="circle">
          4
        </div>
        <div class="title">Step 4</div>
      </div><div class="step">
        <div class="circle">
          4
        </div>
        <div class="title">Step 4</div>
      </div><div class="step">
        <div class="circle">
          4
        </div>
        <div class="title">Step 4</div>
      </div><div class="step">
        <div class="circle">
          4
        </div>
        <div class="title">Step 4</div>
      </div><div class="step">
        <div class="circle">
          4
        </div>
        <div class="title">Step 4</div>
      </div><div class="step">
        <div class="circle">
          4
        </div>
        <div class="title">Step 4</div>
      </div><div class="step">
        <div class="circle">
          4
        </div>
        <div class="title">Step 4</div>
      </div><div class="step">
        <div class="circle">
          4
        </div>
        <div class="title">Step 4</div>
      </div><div class="step">
        <div class="circle">
          4
        </div>
        <div class="title">Step 4</div>
      </div><div class="step">
        <div class="circle">
          4
        </div>
        <div class="title">Step 4</div>
      </div><div class="step">
        <div class="circle">
          4
        </div>
        <div class="title">Step 4</div>
      </div><div class="step">
        <div class="circle">
          4
        </div>
        <div class="title">Step 4</div>
      </div>
    </div>
  </div>
  <div class="page">
    <div class="form">
      <div class="form-stuff">
      form stuff
    </div>
    <div class="form-stuff">
      form stuff
    </div>
    <div class="form-stuff">
      form stuff
    </div>
    <div class="form-stuff">
      form stuff
    </div>
    <div class="form-stuff">
      form stuff
    </div>
    <div class="form-stuff">
      form stuff
    </div>
    <div class="form-stuff">
      form stuff
    </div>
    <div class="form-stuff">
      form stuff
    </div>
    <div class="form-stuff">
      form stuff
    </div>
    <div class="form-stuff">
      form stuff
    </div>
    <div class="form-stuff">
      form stuff
    </div>
    <div class="form-stuff">
      form stuff
    </div>
    </div>
  </div>
  <div class="summary">
    <div class="card">
      <div class="title">Summary</div>
      <div class="subtitle">foo</div>
      <div class="subtitle">foo</div>
      <div class="subtitle">foo</div>
      <div class="subtitle">foo</div>
      <div class="subtitle">foo</div>
    </div>
  </div>
  <div class="actions">
    <div class="inner">
      <div class="button">Back</div>
      <div class="button">Next</div>
    </div>
  </div>
</div>