为什么最大宽度不覆盖最小宽度？答案

【问题标题】：Why doesn't max-width override min-width?为什么最大宽度不覆盖最小宽度？
【发布时间】：2020-01-30 17:45:10
【问题描述】：

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

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

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

我的问题：

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

【问题讨论】：

我没有发现问题。它们达到 50%，如果我让它变宽，它们保持在 50%，如果我让它小于 700px，那么它们保持 350px 的最小宽度并被包裹（第二个进入新行）。你期望发生什么？
如果父元素小于 350 像素，红色框会与父元素重叠。
@FranciscoZarabozo - 当父元素的大小小于子元素的最小宽度之和时，Lg102 似乎期望 100% 的最大宽度接管。一种可能的建议最小宽度
您希望这种情况发生吗？ jsfiddle.net/KsU23/3
您没有在这个问题中专门为您想要的输出寻求解决方案，但我相信您想要的是 max-width: 350px; min-width: 50% 没有任何 width 设置。 See this fiddle.

标签： css

【解决方案1】：

因为CSS standards:

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

计算暂定使用的宽度（不带“最小宽度”和 'max-width') 遵循“计算宽度和边距”以上。

如果暂定使用的宽度大于 'max-width'，再次应用上述规则，但这次使用 'max-width' 的计算值作为 'width' 的计算值。

如果结果宽度小于'min-width'，上述规则再次应用，但这次使用 'min-width' 的值作为 'width' 的计算值。

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

【讨论】：

只有当相同的规则多次应用于一个元素时才会出现优先级。即.foo { bar: fizz; bar: buzz; } 后一个定义优先。在示例中，min-width 和 max-width 是不同的规则，因此不包含优先级。
这并不是真正的优先级。当 declaration 在 rule 中重复时，它只是对由顺序解析产生的相同值的覆盖。生成的规则（一个规则是一个选择器和一组声明）可以根据选择器的特殊性具有优先级，或者如果 2 个规则同样具体，则 CSS 的“级联”效果会发挥作用并考虑后一个定义更具体。
我的意思是你的帖子说“只有当不同的规则都适用于同一个元素时才会出现优先级”，而应该是“只有当相同的样式规则应用于同一个元素时才会出现优先级”
我特别强调了declaration和rule这两个词。第一个是属性和值的单一组合，第二个是一组带有选择器的声明。您完全可以将多个规则应用于同一个选择器，例如基于媒体查询或级联文件。因此，我的陈述是有效的。您打算说在规则中，声明按符号顺序进行解析，因此后面的声明将覆盖在同一规则中声明的先前值。虽然是正确的，但这不是我所说或所指的。
@NielsKeurentjes - 你知道这与 flexbox 有什么关系吗？ flex-basis、flex-grow 等？

【解决方案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;
  }
}

【讨论】：