W3C home > Mailing lists > Public > www-style@w3.org > January 2017

Re: CSS re-introduce min/max functions

From: Joshua Baker <jtbaker@jtbaker.name>
Date: Fri, 13 Jan 2017 08:47:05 -0800
Message-ID: <CAMrnN-jTHkgsu=-R53sKPAOQr+hitv5Fo48vBF2joW4uogYSBw@mail.gmail.com>
To: Oliver Joseph Ash <oliverjash@gmail.com>
Cc: www-style@w3.org
Couldn't this be solved with `width` and `max-width`?

As in...

```
my-element {
  width: 100vh;
  max-width: 500px;
}
```

Demo: http://codepen.io/harbichidian/full/LxZzGR/

On Fri, Jan 13, 2017 at 6:21 AM, Oliver Joseph Ash <oliverjash@gmail.com>
wrote:

> 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 Friday, 13 January 2017 16:48:20 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:09:06 UTC