CSS max min functions
You can use the CSS min() and max() functions to dynamically calculate CSS props of the elements and put min/max constraints on them.
Dynamic CSS properties with min() and max() functions
You can use the CSS min() and max() functions to dynamically calculate CSS props of the elements and put min/max constraints on them.
css
/* Set width dynamically depending on the available space */
.element {
width: min(300px, 100%);
}
/* Ensure that the relative font size doesn't exceed certain limits */
.text {
font-size: min(1rem, 20px);
}
/* Dynamic margin/padding */
.content--max-margin {
margin: max(20px, 5%);
}
.content--min-padding {
padding: min(20px, 5%);
}
/* Ensure images occupy the maximum available space without stretching beyond a certain size. */
.img {
width: max(200px, 50%);
height: auto;
}
/* Specify the minimum width of columns while allowing them to grow as per content or available space. */
.column {
min-width: min(200px, 20%);
}
