Respuestas:
min(),, ¡ max()y clamp()finalmente están disponibles!
A partir de Firefox 75, Chrome 79 y Safari 11.1 (excepto clamp).
min()y max()tomar cualquier número de argumentos.
clamp()tiene sintaxis clamp(MIN, VAL, MAX)y es equivalente a max(MIN, min(VAL, MAX)).
min()y max()puede estar anidado. Se pueden usar tanto dentro calc()como fuera de él, también pueden contener expresiones matemáticas, lo que significa que puede evitarlas calc()al usarlas.
Por lo tanto, el ejemplo original se puede escribir como:
max-width: max(500px, 100% - 80px);Una solución CSS 'pura' en realidad es posible ahora usando consultas de medios:
.yourselector {
max-width: calc(100% - 80px);
}
@media screen and (max-width: 500px) {
.yourselector {
max-width: 500px;
}
}max-height+1
No, no puedes. max()y min()se han eliminado de Valores y unidades de CSS3. Sin embargo, pueden reintroducirse en valores y unidades CSS4 . Actualmente no hay ninguna especificación para ellos, y la calc()especificación no menciona que sean válidos dentro de una calc()función.
Una solución alternativa sería usarlo widthsolo.
max-width: 500px;
width: calc(100% - 80px);500pxo 100% - 80px. Su solución limita el ancho máximo 500pxincluso si 100% - 80pxes más grande.
min()por lo tanto, puede ser útil para otros.
Si bien la respuesta de @david-mangold anterior , fue "cercana", fue incorrecta.
(Usted puede usar su solución si quieres un mínimo de ancho, en lugar de un máximo ancho).
Esta solución demuestra que el comentario @ Gert-Sønderby a esa respuesta hace el trabajo:
La respuesta debería haber utilizado min-width, no max-width.
Esto es lo que debería haber dicho:
min-width: 500px;
width: calc(100% - 80px);Sí, use min-width más width para emular una función max () .
Aquí está el codepen (es más fácil ver la demostración en CodePen y puede editarlo para su propia prueba).
.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>Dicho esto, la respuesta de @ andy anterior puede ser más fácil de razonar y puede ser más apropiada en muchos casos de uso.
También tenga en cuenta que, eventualmente, una max()y una min()función pueden introducirse en CSS, pero a partir de abril de 2019 no forma parte de la especificación.
Aquí puede verificar la max()compatibilidad del navegador:
https://developer.mozilla.org/en-US/docs/Web/CSS/max#Browser_compatibility .
Aquí está el borrador de la propuesta:
https://drafts.csswg.org/css-values-4/#comp-func .
Desplácese hasta la parte superior de la página para ver la última fecha de revisión (a partir de hoy, se revisó por última vez el 5 de abril de 2019).
@Amaud ¿Existe alguna alternativa para obtener el mismo resultado?
Existe un enfoque CSS puro que no es js que lograría resultados similares. Debería ajustar el relleno / margen del contenedor de elementos principales.
.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>