为什么max-width不覆盖min-width？

Question

我正在尝试创建一个响应式布局,如果屏幕大小允许,两个框彼此相邻,如果没有,则将它们放在彼此之下.如果盒子在彼此之下,我希望它们以父母为中心.我已经设置了一个jsfiddle来演示这个问题:

http://jsfiddle.net/leongersen/KsU23/

width: 50%;
min-width: 350px;
max-width: 100%;

尝试将"结果"窗格调整为350px以下.元素将与其父元素重叠.

我的问题:

为什么不指定最大宽度,即使它是在最小宽度之后？

Answer 1

由于CSS标准:

以下算法描述了这两个属性如何影响'width'属性的使用值:

1. 根据上面"计算宽度和边距"下的规则计算暂定使用的宽度(没有'min-width'和'max-width').
2. 如果暂定使用的宽度大于'max-width',则再次应用上述规则,但这次使用'max-width'的计算值作为'width'的计算值.
3. 如果生成的宽度小于'min-width',则再次应用上述规则,但这次使用'min-width'的值作为'width'的计算值.

因此,最小宽度总是"赢".在特定的CSS规则中,无论如何都没有优先权,所有值都以原子方式应用.只有当不同的规则都适用于同一个元素时才会出现优先级,即使这样,它也会在考虑文件顺序之前首先基于特异性.

Answer 2

也晚了，但我认为最好的解决方案是使用min()

width: 50%;
min-width: 350px;
max-width: 100%;

会成为

width: 50%;
min-width: min(350px, 100%);

这样您就不会依赖于媒体查询，这甚至可能不适用于您的用例，因为宽度基于父元素