CSS Function - min()

The CSS function min() allows you to specify the smallest (most negative) value from a list of comma-separated expressions as the CSS property value.

It is applicable to the values <length>, <frequency>, <angle>, <time>, <percent>, <number> or <integer>.

  • The min() function accepts multiple comma-separated expressions.

  • It evaluates these expressions and uses the smallest (most negative) value as output.

  • These expressions can be arithmetic operations, literal values, or other valid arguments like <length>.

  • You have the flexibility to use various units and employ parentheses for controlling computation order if necessary.

Points to remember:

  • Mathematical expressions containing percentages for widths and heights in table columns, column groups, rows, row groups, and cells, whether in tables with automatic or fixed layout, can be processed as if auto had been explicitly specified.

  • Nesting max() and other min() functions as expression values is allowed. These expressions are complete mathematical expressions which allow direct addition, subtraction, multiplication and division without requiring the calc() function.

  • The expression may consist of values combined with addition (+), subtraction (-), multiplication (*), and division (/) operators, following the standard rules for operator precedence.

    Remember to include a space on either side of the + and - operators. The operands in the expression can be any values of <length> syntax.

  • Combining min() and max() values is not only possible, but often necessary. You can also include min() in a clamp() or calc() function.

  • You can include more than two arguments if you want to apply multiple constraints.

Syntax

min( <calc-sum># )

The hash (#) mark multiplier indicates that the entity may be repeated one or more times (for example, the plus multiplier), but each occurrence is separated by a comma (',').

CSS min() - Input Size

Setting a maximum size for responsive form controls with min() enables labels and inputs to resize when the width of the form shrinks.

The following example demonstrates min(). Resize the browser window to see the effect.

<html>
<head>
<style>
   label,input{
      display: block;
      margin-bottom: 10px;
      max-width: min(400px, 60%);
      width: 100%;
      font-size: 18px;
      padding: 10px;
      border-radius: 5px;
      border: 1px solid #ccc;
   }
</style>
</head>
<body>
   <form>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" placeholder="Enter your name" required>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" placeholder="Enter your email" required>
      <label for="message">Message:</label>
      <textarea id="message" name="message" placeholder="Enter your message" required></textarea>
      <button type="submit">Submit</button>
   </form>
</body>
</html>
Advertisements