Why does Flexbox not respect width when nested?

Question

Flexbox doens't respect the width I provide, but it respects the width from the child elements. Could anyone explain why?

I've setup an example how the html looks like, All unnecessary code is stripped. But the structure is basically build when using JS components (vue which in this case is not really of interest)

<div class="row container">
  <div class="col">
    <div class="row container">
      <div class="col col1">
        <div class="row">
          <div class="content">test1</div>
          <div class="content">test2</div>
          <div class="content">test3</div>
        </div>
      </div>
      <div class="col col2">test2</div>
    </div>
  </div>
</div>

CSS:

.row {
  display: flex;
  width: 100%;
  max-width: 100%
}

.container {
  max-width: 100%;
}

.content {
  min-width: 300px;
}

.col1 {
  background-color: lightblue;
  flex-grow: 1;
  overflow-x: auto;
  flex-shrink: 1;
}

.col2 {
  background-color: salmon;
  min-width: 300px;
 }

Here is also a link to JS fiddle to reproduce: https://codepen.io/reijnemans/pen/WNNKXGp

Expected result: .container has a width of 100%; and .col1 should have a scroll-bar to scroll over all .content items. The structure of the html could not be changed regarding flexbox

JS fiddle first example has the wrong example, second example workt fine but has one layer less of flexbox, which is unfortunately not possible in my case. (Second example has the same structure only without the outer row and col)