I want min and max css functions to work with auto

[aarongustafson]

I want to be able to use the common margin: auto property, but with a minimum margin, such as:

margin: 0 max(auto, 16px);

This would center an element horizontally & still enforce 16px of margin on either side when the viewport is too small.

See: https://webwewant.fyi/wants/98/

[nightpool]

Just tried to do this today, didn't realize it wasn't supported! I would love to be able to do this. My specific usecase was "margin-top" in a vertical flex container. The item should align to the bottom edge of the container if the container is larger than the content, but if the container is the same size as the content then there should be a minimum 1em gap between it and the preceding element.

[jamborski-dev]

Just tried to do this today, didn't realize it wasn't supported! I would love to be able to do this. My specific usecase was "margin-top" in a vertical flex container. The item should align to the bottom edge of the container if the container is larger than the content, but if the container is the same size as the content then there should be a minimum 1em gap between it and the preceding element.

Had been annoyed with this one multiple times.. the only viable workaround is to add a parent element with set flex, row and space-between and add explicit top-margin to the child

[mkastner]

Count me in for this one.

[M-J-Robbins]

I've recently been testing font-size:max(16px, medium); which I thought would work but it's not, so I'll add a +1 here too.

Instead I'm using font-size:max(16px, 1rem); which is close but not exactly the same as I believe 1rem can be overwritten using :root but medium will always come direct from the user settings.

I can see good a use case for initial and inherit values also.

[NairiAreg]

+1

[teseopoma]

I've also encountered this issue. As of 2023, CSS functions such as max(), min(), and others are unable to accept predefined values like auto or similar keywords.
I've often faced this challenge when determining height and width, particularly when trying to achieve a fit-content behavior. To address this, I've been using the min-height and max-height properties to set the height.
I hope this information is helpful.

[ou86]

It's unfortunate that this has not been implemented yet.

[emilio]

For some of the properties like width / height / etc, this is solved by the calc-size() function.

For the specific example in the OP, it's more complicated, because what margin does margin: auto resolve to is not super well defined, specially around floats...