我有一个被水平分成三份的组件。左边和右边的元素将各自占据固定的宽度，中间的元素应该填充它们之间的空间。

<div>
   <div class="left">Left Element</div>
   <div class="middle">MiddleElement</div>       
   <div class="right">Right Element</div>
</div>

在我的 css 中，我为左右元素设置了固定宽度，然后使用 calc() 告诉中间元素占据其余部分。

.left,.right {
   width: 8px;
}

.middle {
   width: calc(100% - 16px);
}

然而，结果是中间元素有点太小了。当我打开调试工具时，我看到它的 css 已更改为：

width: calc(84%);

就好像忽略了 % 和 px，从 100 中减去了 16，然后在最后重新加上了 %。

如果我将中间元素更改为使用完全相同的样式，但内联编写，则效果很好。

<div>
   <div class="left">Left Element</div>
   <div style="width: calc(100% - 16px)">MiddleElement</div>       
   <div class="right">Right Element</div>
</div>

我知道还有其他方法可以获得我想要的效果，例如将父 div 的显示设置为 flex 并将中间元素的宽度保留为 100%。但更重要的是，我很想知道我对如何为 css 类和内联样式编写规则的误解。