[css-sizing] fit-content(<length>|<percentage>)

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

[css-sizing] fit-content(<length>|<percentage>)

fantasai
I ran into a few cases where it would have been useful
to be able to fit-content into a size other than the
available space, and just wanted to note that here as
a potential idea for some future level of Sizing.

~fantasai

Reply | Threaded
Open this post in threaded view
|

Re: [css-sizing][css-grid] fit-content(<length>|<percentage>)

fantasai
On 04/01/2016 04:35 PM, fantasai wrote:
> I ran into a few cases where it would have been useful
> to be able to fit-content into a size other than the
> available space, and just wanted to note that here as
> a potential idea for some future level of Sizing.

The CSSWG resolved to add this to Sizing and to Grid last week.
Changes are:
   https://hg.csswg.org/drafts/rev/4a6dbb20cb1c
   https://hg.csswg.org/drafts/rev/e6ce367fcb79

Basic use case for block layout is the current spec style sheet,
which sets max-width: 50em on <body> to keep lines short enough
to be comfortably readable; but tables should be shrink-to-fit
into the full viewport width to take advantage of the space and
reduce unnecessary wrapping within the table cells.

   table { width: fit-content(100vw); align-self: center; }

Basic use case for grid is a basic form with labels on one side
and inputs on the other: you want the column of labels to just
fit the contents without inducing wrapping, and the inputs to
take up the remaining space. However, if the window gets narrow
enough that the labels are more than X% of the window, you want
to induce wrapping on the label column so that there is still
plenty of room for filling out the form (but you don't want any
of the labels to overflow).

form {
   grid-template-columns: fit-content(40%) minmax(5em, 1fr);
}

Let me know if there are any errors / other concerns!
Thanks~
~fantasai

Reply | Threaded
Open this post in threaded view
|

Re: [css-sizing][css-grid] fit-content(<length>|<percentage>)

Sergio Villar Senin
On 17/05/16 23:14, fantasai wrote:

> On 04/01/2016 04:35 PM, fantasai wrote:
>> I ran into a few cases where it would have been useful
>> to be able to fit-content into a size other than the
>> available space, and just wanted to note that here as
>> a potential idea for some future level of Sizing.
>
> The CSSWG resolved to add this to Sizing and to Grid last week.
> Changes are:
>   https://hg.csswg.org/drafts/rev/4a6dbb20cb1c
>   https://hg.csswg.org/drafts/rev/e6ce367fcb79
>
> Basic use case for block layout is the current spec style sheet,
> which sets max-width: 50em on <body> to keep lines short enough
> to be comfortably readable; but tables should be shrink-to-fit
> into the full viewport width to take advantage of the space and
> reduce unnecessary wrapping within the table cells.
>
>   table { width: fit-content(100vw); align-self: center; }
>
> Basic use case for grid is a basic form with labels on one side
> and inputs on the other: you want the column of labels to just
> fit the contents without inducing wrapping, and the inputs to
> take up the remaining space. However, if the window gets narrow
> enough that the labels are more than X% of the window, you want
> to induce wrapping on the label column so that there is still
> plenty of room for filling out the form (but you don't want any
> of the labels to overflow).
>
> form {
>   grid-template-columns: fit-content(40%) minmax(5em, 1fr);
> }
>
> Let me know if there are any errors / other concerns!

A bunch of questions

* Couldn't this be properly resolved using media queries?

* What is that percentage relative to? Grid container, viewport,...?

* What happens when trying to use a percentage of an indefinite size?

BR


Reply | Threaded
Open this post in threaded view
|

Re: [css-sizing][css-grid] fit-content(<length>|<percentage>)

fantasai
On 05/19/2016 03:41 AM, Sergio Villar Senin wrote:

> On 17/05/16 23:14, fantasai wrote:
>> On 04/01/2016 04:35 PM, fantasai wrote:
>>> I ran into a few cases where it would have been useful
>>> to be able to fit-content into a size other than the
>>> available space, and just wanted to note that here as
>>> a potential idea for some future level of Sizing.
>>
>> The CSSWG resolved to add this to Sizing and to Grid last week.
>> Changes are:
>>    https://hg.csswg.org/drafts/rev/4a6dbb20cb1c
>>    https://hg.csswg.org/drafts/rev/e6ce367fcb79
>>
>> Basic use case for block layout is the current spec style sheet,
>> which sets max-width: 50em on <body> to keep lines short enough
>> to be comfortably readable; but tables should be shrink-to-fit
>> into the full viewport width to take advantage of the space and
>> reduce unnecessary wrapping within the table cells.
>>
>>    table { width: fit-content(100vw); align-self: center; }
>>
>> Basic use case for grid is a basic form with labels on one side
>> and inputs on the other: you want the column of labels to just
>> fit the contents without inducing wrapping, and the inputs to
>> take up the remaining space. However, if the window gets narrow
>> enough that the labels are more than X% of the window, you want
>> to induce wrapping on the label column so that there is still
>> plenty of room for filling out the form (but you don't want any
>> of the labels to overflow).
>>
>> form {
>>    grid-template-columns: fit-content(40%) minmax(5em, 1fr);
>> }
>>
>> Let me know if there are any errors / other concerns!
>
> A bunch of questions
>
> * Couldn't this be properly resolved using media queries?

No, because you are comparing a content-based size to the 40%,
and media queries can't do that.

> * What is that percentage relative to? Grid container, viewport,...?

Same as if it were
   grid-template-columns: 40% minmax(5em, 1fr);

> * What happens when trying to use a percentage of an indefinite size?

This is a good question. It should probably degrade to the same
behavior as 'auto'.

~fantasai

Reply | Threaded
Open this post in threaded view
|

Re: [css-sizing][css-grid] fit-content(<length>|<percentage>)

fantasai
On 05/19/2016 05:21 PM, fantasai wrote:
> On 05/19/2016 03:41 AM, Sergio Villar Senin wrote:
>>
>> * What happens when trying to use a percentage of an indefinite size?
>
> This is a good question. It should probably degrade to the same
> behavior as 'auto'.

Tab says it the percentage should just do what it does normally
(whatever that is). Which also makes sense...

Let me know if you have further thoughts on this issue or if there
are any particular edits you think are necessary. :) (I'm not 100%
clear if anything needs fixing, or if so, what.)

~fantasai