Html 动态但受限制的元素宽度？

蓝色div应该占据绿色和紫色div之间的空间。我不知道绿色div的宽度，但是随着它变大，蓝色div的宽度应该变小

编辑：我希望在没有表或javascript的情况下执行此操作

---

在这里的示例中（有表格，但只是为了说明我的意思）：，蓝色矩形正好位于其他两个矩形之间。然而，一个问题是，左矩形并没有占用它所需要的所有空间。左矩形应该能够完全展开。

您可以使用

显示：表格单元格

来获得正确的自动调整大小行为：

.left{
  display:table-cell;
} 
.center{
  display:table-cell;
}
.right{
  display:table-cell;
  width: 200px;
}

---

演示：

您对表格有什么异议？它们确实非常适合这种情况。@nneonneo，我试图避免对非表格数据使用表格。我也不喜欢在桌面上添加tbody、tr和td元素。