Flex container grows over parent - double scrollbar

Question

I've got following setup:

<div class="main-container"> <!-- height 100% -->
  <div class="fixed-container">Fixed Container</div>
  <div class="content-wrapper"> <!-- flex: 1 -->
    <div class="overflow-container"> <-- flex: 1 and applying overflow: auto -->
      <!-- ...and more content here -->
      <div class="overflow-content"> <!-- exceeding overflow-container -->
        ....
      </div>
    </div>
  </div>
</div>

code example i took from here and it's codepen which i manipulated a bit to achieve this behaviour as shown in the snippet below or here

main-container is expanding to the full height so 100% of its parent. (in this case viewport)

fixed-container got an fixed height as 100px which is in this case irrelevant

now content-wrapper grows as much as he can with flex: 1 the strange thing is: now content-wrapper grows slightly to much so main-container has to scroll just a bit and the scrollbar appears.

I really don't get why the content-wrapper grows that little bit to much, anyone any explanation about this or an solution how to prevent the main-container from showing the scrollbar or that content-wrapper wouldn't grow as much as he does right now?

/* a container with flex-direction column */
.main-container {
  max-height: 100vh; /* or position:absolute; height:100%; */
  display: flex;
  flex-direction: column;
}

/* an arbitrary container of fixed height */
.fixed-container {
  height: 100px;
  padding: 20px;
  background-color: #0B5AB0;
  color: white;
}

/* this is the flex container that will take the rest of the height */
.content-wrapper {
  display: flex;
  flex: 1;
  min-height: 0px; /* IMPORTANT: you need this for non-chrome browsers */
}

/* the container for our overflowed content */
.overflow-container {
  flex: 1;
  overflow: auto;
}

/* the overflow content itself */
.overflow-content {
  height: 2000px;
  color: black;
  background-color: #ddd;
  padding: 20px;
}

code {
  font-weight: bold;
  color: darkred;
  margin: 0 5px;
}

<div class="main-container">
  <div class="fixed-container">Fixed Container</div>
  <div class="content-wrapper">
    <!-- ...more content here -->
    <div class="overflow-container">
      <!-- ...and more content here -->
      <div class="overflow-content">
        Overflow Content
        <br/><br/>
        For Non-Chrome browsers (Firefox, Safari, etc):<br/>
        Without <code>min-height:0px;</code> on the content-wrapper,
        this content will not scroll but instead will expand to its 
        full height.
        <br/><br/>
        Note that the setup of the main-container here is important too.
        If its not
        <code>position:absolute; height:100%; flex-direction:column;</code>
        or 
        <code>height:100vh; flex-direction:column;</code>
        then you may not run into this issue;
      </div>
    </div>
  </div>
</div>