Flex No Wrap causing parent elements to wrap

Question

I'm using Bootstrap CSS and I have some content that I want to horizontally scroll. Using 'flex-nowrap' gives the scrollbar, but causes the parent element to wrap. What am I missing? Here is a screenshot of what I'm seeing:
 

Here is a fiddle of the code. https://jsfiddle.net/igor_9000/2Lq9padm/

And the code itself

CSS

.sidebar {
  width: 200px;
  border: 1px solid red;
}

.main {
  border: 1px solid blue;
}

.desired .main {
  /* this gives me what I want, but will cause my layout to break in other pages */
  overflow-x: hidden;
}



#card-tabs {
    overflow-y: visible;
    overflow-x: auto;
    white-space: nowrap;
    padding: 0;
    width: 100%;
    clear: both;
}
#card-tabs .some-card {
  border: 1px solid #333;
  width: 150px;
  height: 50px;
}

HTML

<h1>
Actual Result
</h1>
<div class="container">
  <div class="row">
    <div class="col-auto sidebar">
      sidebar
    </div>
    <div class="col main">
      <div class="row">
        <div class="col">
          navigation
        </div>
      </div>

      <div id="component-container" class="row">
        <div class="col">
          <div class="row flex-row flex-nowrap" id="card-tabs">
            <div class="col">
              <div class="some-card">
                Card A
              </div>
            </div>
            <div class="col">
              <div class="some-card">
                Card B
              </div>
            </div>
            <div class="col">
              <div class="some-card">
                Card C
              </div>
            </div>
            <div class="col">
              <div class="some-card">
                Card D
              </div>
            </div>
            <div class="col">
              <div class="some-card">
                Card E
              </div>
            </div>
            <div class="col">
              <div class="some-card">
                Card F
              </div>
            </div>
          </div>
        </div>


      </div>
      <div class="row">
        <div class="col-12">
          footer
        </div>
      </div>


    </div>    
  </div>
</div>


<h1>
Desired Result
</h1>
<div class="container desired">
  <div class="row">
    <div class="col-auto sidebar">
      sidebar
    </div>
    <div class="col main">
      <div class="row">
        <div class="col">
          navigation
        </div>
      </div>

      <div id="component-container" class="row">
        <div class="col">
          <div class="row flex-row flex-nowrap" id="card-tabs">
            <div class="col">
              <div class="some-card">
                Card A
              </div>
            </div>
            <div class="col">
              <div class="some-card">
                Card B
              </div>
            </div>
            <div class="col">
              <div class="some-card">
                Card C
              </div>
            </div>
            <div class="col">
              <div class="some-card">
                Card D
              </div>
            </div>
            <div class="col">
              <div class="some-card">
                Card E
              </div>
            </div>
            <div class="col">
              <div class="some-card">
                Card F
              </div>
            </div>
          </div>
        </div>


      </div>
      <div class="row">
        <div class="col-12">
          footer
        </div>
      </div>


    </div>    
  </div>
</div>