CSS re-introduce min/max functions

I am aware that min/max functions have been specified before but were
dropped, however I think there are still valid use cases for them with no
acceptable workarounds. I noticed this thread from 2011 which proposed
re-introducing them, but I don't see any follow up:
https://www.w3.org/Style/CSS/Tracker/issues/203

A personal use case of mine, but I'm sure there are many others: I want to
display an element with a max-width of 100vh or some arbitrary pixel
measurement, whichever is smallest. (This is for my photography blog,
https://samefourchords.com/: images should stretch but appear no larger
than the height of the viewport or the width of the image, whichever is
smallest.)

I'm able to achieve a similar effect to a min function by wrapping the
element and using two max-widths:

<div style="max-width: 100vh;">
    <my-element style="max-width: 500px;"></my-element>
</div>

Unfortunately this workaround means I cannot layout my element as easily
(e.g. it is no longer a flex item, but a child of a flex item). display:
contents won't help here because that would not honour the max-width, if I
understand correctly.

Received on Thursday, 2 February 2017 14:36:45 UTC