bootstrap 上的 3 列布局失去了形状

Question

我有一个 3 列的设计，其中第一列的固定宽度为 630 像素，中间列应采用所有可用的 space，第三列的固定宽度为 200 像素。

我使用 bootstrap Flex 进行设置，在中间栏中使用 flex-fill。它看起来很漂亮，但是当我开始填充中间部分时，它会吃掉最后一个的 space。简化后的代码如下所示：

//body css: height: 100%, oveflow: hidden
<div class="mainContainer d-flex flex-row w-100"> //css: height 100vh, 
  <div class="leftColumn d-flex">
     //inner content ar boxes with fixed width leaning to the 600px
     //this part looks perfect
  </div>
  <div class="MainArea flex-fill d-flex flex-column">
    <div class="MainAreaUpperRowOfCards flex-fill d-flex flex-row flex-wrap">
      // here I add cards with fixed size, they are lied down 
      // in a row, and they wrap nicelly.
      // But when they wrap this section starts to grow eating the
      // third colum's space
    </div>
    </div class="MainAreaLowerRow  d-flex flex-row justify-content-center"> 
      //css: height: 250px, margin-bottom: -60px
      //here are some cards that only show the upper part, hence the -60px
    </div>
  <div>
  <div class="RightColumn d-flex flex-column"> //css: width 220px; background and magins..
    //here some cards with players information
    //this is the column being eaten.
  </div>
</div>

这是开始时和添加一些卡片后的样子：

所以我有两个问题：

如何固定最右侧列的宽度？（图中绿色箭头）
如何去除卡片包装上的 space？（图中红色箭头）

为了方便我添加了一个动画：

Answer 1

将 width: 220px; 更改为 min-width: 220px;。
没有现场演示很难帮到你。尝试一个一个地删除 flex 类并查看是否有任何类导致此 space.

bootstrap 上的 3 列布局失去了形状

3 colum layout on bootstrap losing its shape

css

bootstrap-4

flexbox