Re: [csswg-drafts] [css-values] Add the `fr` (flexible length) unit for general use as a length unit (#5296)

Obviously, it would only be usable in contexts in which the parent had a fixed size that couldn't be affected by the size of its children. If I have a container element whose width is set so as not to be affected by its children (which should be the case if you set it explicitly to a particular value or to a percentage of its parent container's size, generally), then it should be possible to use `fr` units.

If the engine finds that the `fr` unit can't be safely used, then perhaps falling back to treating it as a percentage would work (that is, multiply the `fr` unit by 100 to convert it to a percentage). It would be roughly equivalent, though not precise and may not be quite what the developer is hoping for, but it would be better than failing entirely or the renderer going into some kind of infinite loop.

In my case, I had a grid that included cells that contained a heading and a `<div>` that needed to fill the remainder of the space. So I wanted to simply specify the height of the `<div>` as `1fr` in order to let the browser know to just use all remaining space below the heading. This would have allowed it to adapt if the heading were long enough to wrap lines, or to adapt to slightly different line heights as the styles change over time. Setting the height to `100%` did not present the desired results (I don't recall what happened but it certainly wasn't what I was shooting for).

In the end I wound up having to put the headings in separate grid cells, which was an annoying solution for various reasons, and IMO shouldn't have been necessary.

In another case, elsewhere in the same example, I had a block in which I wanted to have a heading, a couple of paragraphs of introductory text, and then below that an `<iframe>` occupying the remainder of the block. Being able to use `fr` units would have gotten me the result I wanted more quickly and easily than any other approach I played with, since I could simply have let the heading and intro content take whatever space it needed then used `height: 1fr` on the `<iframe>`.

Usefulness becomes more pronounced if you need to split the available space among, say, three objects. Anyway, that's the gist of it.

Along similar lines, being able to use `fr` units in `calc()` would be enormously helpful.

GitHub Notification of comment by a2sheppy
Please view or discuss this issue at using your GitHub account

Received on Sunday, 12 July 2020 18:42:07 UTC