Javascript 调整大小时减小列表组的宽度而不向左移动

我有一个引导容器设置，其中2张卡占据左侧的前3列，一个列表组占据其余9列。在调整大小时，我希望列表组保持固定，而不是向左移动。我只想让它的宽度变小。我该怎么做呢？我曾尝试将位置设置为绝对和固定，但这样做后，列格式会变得混乱。我的设置如下：

<div class="col-lg-3 mt-3 ">
    <div class="card shadow border-0" style="width: 19.6rem;"> body here </div>
</div>

<div class="col-lg-9 mt-3">
    <div class="list-group" id="list">
        <button class="list-group-item list-group-item-action"  id="item1"> body </button>
        <button class="list-group-item list-group-item-action"  id="item2"> body </button>
    </div>
</div>

这里的尸体
身体
身体

---

我之所以为第一个div设置宽度，是因为我不希望在调整大屏幕的大小时更改宽度。我想为第二部分做一些类似的事情。

引导程序中的列被设计为响应地更改宽度。如果希望一列保持不变，然后第二列更改大小，则需要在不使用列的情况下执行此操作

一个很好的方法是使用一个固定大小的简单flex box设置。

.列包装器{
背景：绿色；
宽度：100%；
高度：100vh；
显示器：flex；
弯曲方向：行；
}
.左栏{
宽度：200px；
背景：蓝色；
高度：50vh；
弹性收缩：0；
}
.右栏{
背景：红色；
高度：50vh；
宽度：100%
}
这里的尸体
身体
身体

<style>

.column-wrapper{
  background: green;
  width:100%;
  height: 100vh;
  display: flex;
  flex-direction: row;
}

.column-left{
  width: 200px;
  background: blue;
  height: 50vh;
  flex-shrink: 0;
}

.column-right{
  background:red;
  height: 50vh;
  width: 100%
}

</style>

<div class="column-wrapper">
    <div class="column-left">
        <div class="card shadow border-0" style="width: 19.6rem;"> body here 
        </div>
    </div>
    <div class="column-right">
        <div class="list-group" id="list">
            <button class="list-group-item list-group-item-action"  id="item1"> body </button>
            <button class="list-group-item list-group-item-action"  id="item2"> body </button>
        </div>
    </div>
</div>