TIL: CSS Min() & Max()

Common use of min() & max() CSS is to determine the width of a container.

min()

It received 2 values, example:

.box {
    width: min(50%, 500px)
}

The first value said the box shall always remain 50% of the view width. So even your view width is 100px, the box will take out 50%.

The second value said the box should not exceed 500px no matter how big is your view width.

max()

.box {
    width: max(50%, 500px)
}

As you guess, it's the opposite of min(). The value said the box shall always grow and take up 50% of the view width no matter how big is the view width. But it will not shrink down to smaller than 500px.

Try it on CodePen