使用百分比宽度居中div，但具有最大宽度

Question

我正在尝试执行以下操作：（JSFiddle在底部）

它应该如何工作：

yellow box应填充剩余空间，即使红色框有width: 25%也不应超过330px 。 如果黄色框（填充剩余空间）的宽度小于1000px，则应该用蓝色框完全填充，但如果它的宽度大于1000px，则蓝色框应该具有width: 1000px并且位于黄色的盒子。

在红色框中，我有hide button左侧栏的hide button ，而在蓝色栏中，我有一个按钮，它会带回左侧栏。 隐藏左栏时，它应如下所示：

我遇到的问题：

1. 当分辨率宽度> 1800px（例如）时，红色框（因为它的最大宽度小于25％）并且它没有填满整个容器。 （小提琴中的问题屏幕）
2. [修复]我无法弄清楚如何使bluebox盒居中，因为它的宽度是100％，但是最大宽度不能让盒子超过1000px。（ 问题的屏幕应该居中）

这是我的问题的JSFIDDLE ： JSFIDDLE 。 缩小（使用ctrl +鼠标滚轮向下）以查看更高分辨率的问题。

我已经挖掘了这个问题已经有3.5个小时了，无法找到问题的答案。

Answer 1

要使元素水平居中，您需要将以下两个CSS属性添加到中右侧类：

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

这是更新的JsFiddle 。