dynamic size with only clamp, min and max
I have a div, I want its width to be 50% as long as 95vw is not possible. If 95vw is possible, I want 95vw to be the width. Can I express this logic with clamp, min and max?
15 Replies
define "is possible"
is it if there are no other elements?
if there is 95vw of space available?
Let me create a fiddle
https://jsfiddle.net/260w1spf/
Here when your resize the container to a point where
flex-direction: column takes over, I want .sec-1 to take width: 95vw
I know I could just add this to the media query in this example, but consider that this example is simplified.
I just want .sec-1 to take 95vw width, if the space is availableEdit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
i will check later
I’m pretty sure 95vw is always possible no matter the screen size, so it wouldn’t really work the way you think I don’t believe, I may be wrong though.
95vw is almost the same as "95% of the screen's viewable width"
But 95% vw is actually... not possible in this example. See, it has no width of 95%
Yeah, so surely it can’t pick between 50% and 95vw because it’ll always be 95vw?
50% is not 95vw
50% is 50% of whatever is in the parent
95vw is 95% of the visible viewport width
(kinda, but usually yes)
now, 50% of what?
its not
95% vw. it's 95vw
95vw is a fixed unit, like px, cm, in, rem ...
95vw is always 95vw on a tiny screen of a huge 8k display
but 95% is refering to the parent's value
if the parent is 500px wide, 95% width is 5000.95=475px
if it is 50%, it will be 5000.50=250px🤦 Yep I was braindead writing that message. Yup I actually meant 95vw, forget the %
What I meant is that
.sec-1 actually has no 95vw widthTo answer the question, I do not believe logic would be able to do this without a query. If min is used, 50% of the container will always be smaller than 95vw. Same with max, 95vw will always be larger than 50% of the container. And then with clamp, if 50% is used as the min value and 95vw is used as the max value, it will always grow between the values, but I can't think of a preferred value to place in the middle that would make it shrink and grow to such extremes.
Thanks!
pedantically speaking, you're both wrong and right.
practically speaking, you are absolutely right
50% on itself has no meaning, and it can be both larger and smaller than 95vw
but, everything else is absolutely spot on, as almost always 50% will be smaller than 95vw
Well, yes. 50% could be larger than 95vw if the container is wider thus overflowing the screen. But I can't think of a design for that purpose. :p
i can: a slideshow
or an horizontal scroll section
but besides that, you are right