Css 为什么'；最大宽度覆盖最小宽度？

我正在尝试创建一个响应性的布局，如果屏幕大小允许，两个盒子相邻放置，如果屏幕大小不允许，则将它们置于彼此下方。如果这些盒子在彼此下方，我希望它们位于它们的父对象的中心。我已经设置了一个JSFIDLE来演示这个问题：

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

我的问题:

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

因为：

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

计算暂定使用宽度（不含“最小宽度”和 “最大宽度”），遵循“计算宽度和 页边距”在上面

如果暂定宽度大于 “最大宽度”，再次应用上述规则，但这次使用 “最大宽度”的计算值作为“宽度”的计算值

如果生成的宽度小于“最小宽度”，则执行上述规则 再次应用，但这次使用“最小宽度”值作为 “宽度”的计算值

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

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

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;
  }
}

---

我看不出有什么问题。它们达到50%，如果我把它弄宽，它们保持在50%，如果我把它弄小到700px，那么它们保持最小宽度350px，然后被包裹起来（第二行进入新的一行）。您希望发生什么？如果父元素小于350px，则红色框将与父元素重叠。@FranciscoZarabozo-Lg102似乎希望当父元素的大小小于子元素的最小宽度之和时，100%的最大宽度将接管。一种建议的最小宽度，在可能的情况下，你希望这种情况发生吗？在这个问题上，您并没有专门为您想要的输出寻找解决方案，但我相信您想要的是

max width:350px；最小宽度：50%

无任何

宽度设置。只有当同一规则多次应用于一个元素时，才会出现优先级。i、 e.
.foo{bar:fizz；bar:buzz；}
后一种定义优先。在本例中，
minwidth
和
maxwidth
是不同的规则，因此优先级不在其中。这不是真正的优先级。当一个声明在一个规则中被复制时，它只是由顺序解析产生的相同值的覆盖。结果规则（其中一个规则是选择器和一组声明）可以根据选择器的特殊性具有优先级，或者如果两个规则同样特殊，CSS的“级联”效应就会发挥作用，后一个定义被认为更为具体。我的观点是，你的帖子说“只有当不同的规则都应用于同一个元素时，优先权才会出现”，当它应该是“只有当相同的样式规则应用于同一个元素时，优先权才会出现”“我特别强调了声明和规则这两个词。第一个是属性和值的单一组合，第二个是一组带有选择器的声明。您完全可以将多个规则应用于同一选择器，例如基于媒体查询或级联文件。因此，我的声明是有效的。您想说的是，在一个规则中，声明是按照表示法的顺序进行解析的，因此，后面的声明将覆盖同一规则中声明的先前值。虽然正确，但这不是我所说或所指的。@NielsKeurentjes-你知道这与flexbox有什么关系吗；弹性基础、弹性增长等？
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;
  }
}