[css-sizing] add fill(<length-percentage>) / rename stretch keyword for width/height?

[fantasai]

Was reading some of the discussions on dialog styling, where one of the issues was trying to max-size something to fit the viewport minus margin/border/padding. Using calc() doesn't play with the cascade very well, but the stretch keyword (previously fill-available) does. However it only fills the containing block: if you want to fill to a different size, you can't.

I was wondering if we wanted to introduce a fill() function similar to fit-content() (and maybe rename stretch back to fill for consistency if it hasn't been implemented anywhere)?

That would allow things like max-height: fill(100vh) regardless of where you are in the document.

[Loirooriol]

I think it would be good to keep stretch for consistency with https://drafts.csswg.org/css-align/#valdef-justify-self-stretch
This new function could be called stretch() too.

[chrishtr]

Hi could you give an example where this new function would be used? One was mentione during the meeting but was unsure of the details.

[css-meeting-bot]

The CSS Working Group just discussed [css-sizing] add fill(<length-percentage>) / rename stretch keyword for width/height?.

The full IRC log of that discussion

<dael> Topic: [css-sizing] add fill(<length-percentage>) / rename stretch keyword for width/height?
<fantasai> I'm thinking maybe it should be called "Mapping Group" and we should call logical property group "logical property mapping group" or something...
<dael> github: https://github.com//issues/5650
<dael> fantasai: As I was going through some of sizing occured we might want to have the baility to rep the size as I want you to fill this length or %. What this would do which is different is account for margins
<dael> fantasai: WE have a keyword currently called stretch which should be same name as function. Gives the fill of the block element. Introduce a function which does same but fill arbitrary elements. Call it fill or stretch depending on how we name the keyword. SHould match
<dael> TabAtkins: Sounds reasonable to me
<dael> astearns: Sounds reasonable, but that's a low bar. I think I'd like to see use cases
<dael> fantasai: Sure. Max-heigh fill 100vh on images. Long scrolling doc with images want to make sure they're not bigger then viewport. What if you want to account for margins? You can subtract for a length but with this you can subtract the margins.
<dael> fantasai: We can discuss later but I think we need to decide if we want to keep stretch or fill as keyword for the overall behavior
<dael> chrishtr: Could you add the examples to the issue?
<dael> astearns: The 100vh one is.
<dael> astearns: I'm partial to stretch term. Fill isn't quite the meaning in my mind. I don't know if anyone else has opinion
<dael> oriol: I prefer to keep stretch b/c matches the keyword in justify/align-self which is same behavior w/o max width and height properties aren't taken into acocunt. Easier for authors if keep same name.
<dael> astearns: A little concerned about weird edge cases where stretching or accomodating margins makes things more complicated. Just a general worry this isn't as simple as stated.
<dael> astearns: Other opinions?
<dael> astearns: Shall we go back to the issue for now?
<dael> astearns: Since fantasai mentioned you're happy not to resolve today
<dael> fantasai: Yeah, I mentioned that
<dael> astearns: Let's keep this open and talk through more use cases and edge cases.
<dael> astearns: If anyone interested in drawing out impl of this that would also be useful