计算最大值，或 CSS 中计算的最大值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16617248/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Calc of max, or max of calc in CSS
提问by Arnaud
Is it possible to do something like this
是否有可能做这样的事情
max-width: calc(max(500px, 100% - 80px))
or
或者
max-width: max(500px, calc(100% - 80px)))
in CSS?
在 CSS 中？
采纳答案by user
min(), max(), and clamp()are finally available!
Starting in Firefox 75, Chrome 79, and Safari 11.1 (except clamp).
从 Firefox 75、Chrome 79 和 Safari 11.1 开始（除了clamp）。
min()and max()take any number of arguments.
min()并max()接受任意数量的参数。
clamp()has syntax clamp(MIN, VAL, MAX)and is equivalent to max(MIN, min(VAL, MAX)).
clamp()有语法clamp(MIN, VAL, MAX)，等价于max(MIN, min(VAL, MAX)).
min()and max()may be nested. They can be used in calc()as well as outside of it, they also may contain math expressions, that means you can avoid calc()when using them.
min()并且max()可以嵌套。它们既可以在内部使用，也可以在calc()外部使用，它们也可能包含数学表达式，这意味着您可以避免calc()使用它们。
Therefore the original example can be written as:
因此，原始示例可以写为：
max-width: max(500px, 100% - 80px);
回答by Andy
A 'pure' css solution actually is possible now using media queries:
现在使用媒体查询实际上可以实现“纯”css 解决方案：
.yourselector {
max-width: calc(100% - 80px);
}
@media screen and (max-width: 500px) {
.yourselector {
max-width: 500px;
}
}
回答by David Storey
No you cannot. max()and min()have been dropped from CSS3 Values and Units. They may be re-introduced in CSS4 Values and Unitshowever. There is currently no spec for them, and the calc()spec does not mention that either are valid inside a calc()function.
你不能。max()并min()已从 CSS3 值和单位中删除。然而，它们可能会在 CSS4 值和单位中重新引入。目前没有针对它们的calc()规范，并且规范没有提到它们在calc()函数内都是有效的。
回答by David Mangold
A workaround would be to use widthitself.
一种解决方法是使用width它自己。
max-width: 500px;
width: calc(100% - 80px);
回答by SherylHohman
While @david-mangold's answer above, was "close" it was incorrect.
(You canuse his solution if you want a minimumwidth, instead of a maximumwidth).
虽然上面@david-mangold 的回答是“接近”，但它是不正确的。
（如果您想要最小宽度而不是最大宽度，则可以使用他的解决方案）。
This solution demonstrates that @gert-s?nderby comment to that answer doeswork:
The answer should have used min-width, not max-width.
此解决方案表明 @gert-s?nderby 对该答案的评论确实有效：
答案应该使用min-width，而不是max-width。
This is what it should have said:
这是它应该说的：
min-width: 500px;
width: calc(100% - 80px);
Yes, use min-widthplus widthto emulate a max()function.
是的，使用min-widthplus width来模拟max()函数。
Here's the codepen(easier to see the demo on CodePen, and you can edit it for your own testing).
这是codepen（在CodePen 上更容易看到演示，您可以编辑它以进行自己的测试）。
.parent600, .parent500, .parent400 {
height: 80px;
border: 1px solid lightgrey;
}
.parent600 {
width: 600px;
}
.parent500 {
width: 500px;
}
.parent400 {
width: 400px;
}
.parent600 .child, .parent500 .child, .parent400 .child {
min-width: 500px;
width: calc(100% - 80px);
border: 1px solid blue;
height:60px;
}
.ruler600 {
width: 600px;
border: 1px solid green;
background-color: lightgreen;
height: 20px;
margin-bottom: 40px;
}
.width500 {
height: 20px;
width: 500px;
background-color: lightyellow;
float: left;
}
.width80 {
height: 20px;
width: 80px;
background-color: green;
float: right;
}
.parent600 .wrong, .parent500 .wrong, .parent400 .wrong {
max-width: 500px;
width: calc(100% - 80px);
border: 1px solid red;
height:60px;
}<h2>(Min) min-width correctly gives us the Larger dimension: </h2>
<div class="parent600">
600px parent
<div class="child">child is max(500px, 600px - 80px) = max(500px, 520px) = 520px</div>
</div>
<div class="ruler600"><div class="width500">500px</div>20<div class="width80">80px</div></div>
<div class="parent500">
500px parent
<div class="child">child is max(500px, 500px - 80px) = max(500px, 420px) = 500px</div>
</div>
<div class="ruler600"><div class="width500">500px</div><div class="width80">80px</div></div>
<div class="parent400">
400px parent (child expands to width of 500px)
<div class="child">child is max(500px, 400px - 80px) = max(500px, 320px) = 500px</div>
</div>
<div class="ruler600"><div class="width500">500px</div><div class="width80">80px</div></div>
<h2>(Max) max-width <em>incorrectly</em> gives us the Smaller dimension: </h2>
<div class="parent400">
400px parent
<div class="wrong">child is min(500px, 400px - 80px) = min(500px, 320px) = 320px</div>
</div>
<div class="ruler600"><div class="width500">500px</div><div class="width80">80px</div></div>
<div class="parent500">
500px parent
<div class="wrong">child is min(500px, 500px - 80px) = min(500px, 420px) = 420px</div>
</div>
<div class="ruler600"><div class="width500">500px</div><div class="width80">80px</div></div>
<div class="parent600">
600px parent
<div class="wrong">child is min(500px, 600px - 80px) = min(500px, 520px) = 500px</div>
</div>
<div class="ruler600"><div class="width500">500px</div>20<div class="width80">80px</div></div>That said, @andy's answer abovemay be easier to reason about, and may be more appropriate in many use cases.
也就是说，@andy 上面的回答可能更容易推理，并且在许多用例中可能更合适。
Also note, that eventuallya max()and a min()function may be introduced to CSS, but as of April 2019 it is not part of the spec.
另请注意，最终amax()和 amin()函数可能会被引入 CSS，但截至 2019 年 4 月，它不是规范的一部分。
Here you can check for
max()Browser compatibility:
https://developer.mozilla.org/en-US/docs/Web/CSS/max#Browser_compatibility.Here is the draft of of the proposal:
https://drafts.csswg.org/css-values-4/#comp-func.
Scroll to the top of the page to see the last revision date (As of today, it was last revised on 5 April 2019).
您可以在此处检查
max()浏览器兼容性：
https: //developer.mozilla.org/en-US/docs/Web/CSS/max#Browser_compatibility。这是提案的草稿：
https: //drafts.csswg.org/css-values-4/#comp-func。
滚动到页面顶部查看上次修订日期（截至今天，上次修订日期为 2019 年 4 月 5 日）。
回答by Jicub
@Amaud Is there an alternative in order to have the same result ?
@Amaud是否有替代方法以获得相同的结果？
There is a non-js pure css approach that would achieve similar results. You would need to adjust the parent elements container padding/margin.
有一种非 js 纯 css 方法可以实现类似的结果。您需要调整父元素容器填充/边距。
.parent {
padding: 0 50px 0 0;
width: calc(50%-50px);
background-color: #000;
}
.parent .child {
max-width:100%;
height:50px;
background-color: #999;
}<div class="parent">
<div class="child"></div>
</div>