How can I limit the size of a horizontally scrolling section in column flexbox Layout?

Question

How can I have horizontally scrolling content inside of a flex-box layout, without having it expand past the edge of the screen?

In the example below, you can see that the blue-bordered section escapes its red-bordered parent, because the black boxes cause it to expand in size. Instead, I need the horizontal scrollbar to be inside the orange bordered section.

.main {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: row;
  border: 2px solid red;
}

.left {
  flex: 0 0 200px;
  border: 2px solid green;
}

.right {
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
   border: 2px solid blue;
}

.right-top {
    flex: 1 1 auto;
    border: 2px solid purple;
}

.right-bottom {
    display: flex;
    border: 2px solid orange;
    flex: 0 0 50px;
    overflow-x: scroll;
}

.card {
  height: 40px;
  margin: 5px;
  background: black;
  color: white;
  width: 200px;
  height: 90px;
}

<div class="main">
   <div class="left">
       Left
   </div>
   <div class="right">
     <div class="right-top">
         Right top
     </div>
     <div class="right-bottom">
         <div class="card">Only these squares</div>
         <div class="card">should scroll</div>
         <div class="card">horizontally</div>
         <div class="card"></div>
         <div class="card"></div>
         <div class="card"></div>
         <div class="card"></div>
     </div>
   </div>
</div>