Bootstrap - 连续两个 div，一个固定，一个灵活

Question

我尝试连续获得两个 div。一个固定 (220 像素)，另一个填充页面的其余部分，所以它总是 100%。

我也读过类似的主题： Two divs in one row

我尝试了几种方法，Bootstrap、Flexbox、Floating Divs，最后我使用了 calc，但我无法获得 100% 准确的结果。

我最喜欢的方法是使用 Bootstrap，但我无法让它工作，无论是使用网格还是其他选项。

实际方法似乎有点混乱：每当我使用 calc() 并减去第一个容器的相同宽度时，它就会显示在第二行中。只有当我再减去4px时，它才显示在同一行中。

我猜这是左右两个div的左右边框。 div 之间也有一点边距，即使我将边距设置为 0px。

    <div style="width:220px; display:inline-block; background-color:#F00; margin: 0px;">
        1
    </div>
    <div style="width: calc(100% - 224px); display:inline-block; background-color:#FF0; margin: 0px;">
        2
    </div>

我的问题很简单：我怎样才能准确地做到这一点？