css - 为什么最大宽度不覆盖最小宽度？

Question

我正在尝试创建一个响应式布局，如果屏幕尺寸允许，两个框并排放置，如果不允许，则将它们放在彼此下方。如果这些框彼此下方，我希望它们以它们的父级为中心。我设置了一个 jsfiddle 来演示这个问题：

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

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

尝试将“结果”窗格的大小调整为 350 像素以下。元素将与其父元素重叠。

我的问题：

为什么不尊重指定的最大宽度，即使它在最小宽度之后？

Answer 1

由于CSS 标准：

以下算法描述了这两个属性如何影响“宽度”属性的使用值：

1. 按照上面“计算宽度和边距”下的规则计算暂定使用的宽度（没有“最小宽度”和“最大宽度”）。
2. 如果暂定使用的宽度大于“最大宽度”，则再次应用上述规则，但这次使用“最大宽度”的计算值作为“宽度”的计算值。
3. 如果结果宽度小于“min-width”，则再次应用上述规则，但这次使用“min-width”的值作为“width”的计算值。

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

Answer 2

我知道，我迟到了......但一个确切的解决方案可能是这样的：

p {
    display: inline-block;
    font-size: 15px;
    text-align: left;
    width: 50%;
    border: 1px solid blue;
    min-width: 350px;
}
@media (max-width: 700px) {
  p {
    width:100%;
    display:block;
  }
}