如何在列flexbox布局中限制水平滚动部分的大小？

Question

如何在flex-box布局内水平滚动内容，而又不扩展到屏幕边缘之外？

在下面的示例中，您可以看到蓝色边框部分逃脱了其红色边框父对象，因为黑框导致其尺寸扩大。相反，我需要水平滚动条位于橙色边框区域内。

.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>