Javascript 以百分比宽度居中div，但以最大宽度居中div

我试图做以下工作：（底部的JSFiddle）

它应该如何工作：

黄色框应填满剩余空间，即使红色框的宽度为
25%
也不应超过
330px
。如果黄色框（填充剩余空间）的宽度小于1000px，则应完全由蓝色框填充，但如果其宽度大于1000px，则蓝色框应具有
宽度：1000px
，并在黄色框内居中

在红色框中，我有一个隐藏左栏的
隐藏按钮
，在蓝色框中，我有一个返回左栏的按钮。当左栏隐藏时，它应该如下所示：

我面临的问题：

当分辨率为宽度>1800px（例如）时，红色框（因为它的最大宽度小于25%）不会填充整个容器
[Fixed]我不知道如何将
蓝盒居中，因为它的宽度是100%，但最大宽度不能超过1000px。（，应该居中）

这里是我的一个问题：。
缩小（使用ctrl+mousewheel down）以更高的分辨率查看问题

我已经深入研究这个问题3,5个小时了，找不到问题的答案。
要使元素水平居中，需要将以下两个CSS属性添加到右中类：

margin-left: auto;
margin-right: auto;

这是最新的问题。
您对第一个问题的确切含义是什么？绿色的div不适合空间的其余部分吗？@Daniellisk在更高的分辨率上，红色框的宽度是330px（例如远小于1920年的25%），因此红色框将是容器宽度的10%，例如，10%+75%=85%，留下15%的未填充空间。哇，我尝试过几次，但现在它成功了！谢谢我真的很感激！对于第一个问题，你有什么建议吗？对于第一个问题，请参阅此问答。这正是我需要的。伟大的谢谢