Re: [media-queries] chicken-egg problem with font-based lengths

On Mon, Aug 20, 2012 at 2:48 PM, Simon Sapin <> wrote:
> Le 20/08/2012 14:33, Giuseppe Bilotta a écrit :
>> Neither floats nor inline-blocks suffice to achieve what I want. I do
>> use inline-blocks, the #container wraps a number of divs which have
>> display: inline-block; however, if the #content is not sized_exactly_
>> as the number of blocks (+ margins) that would fit inside the
>> viewport, I get extra whitespace inside the #container, which I don't
>> want. This is why I have to manually specify the #content (max-)width
>> depending on the viewport width and based on the (fixed) width of its
>> inline-blocks.
>> It does seem that the fit-content would be what I need. I guess I
>> should write an extra rule (after all the media queries), with
>> #content { max-width: fit-content }, and wait for it to be supported.
>> Thanks for the pointer.
> fit-content only gives a name to the sizing algorithm shared by floats and
> inline-block:
>     min(max-content, max(min-content, fill-available))
> In particular, if min-content < fill-available < max-content, the container
> will use all of the available width.
> I think that what you want is this: Once the layout of the content is done,
> shrink the container to the actual line break of the content.


> I don’t think
> this is possible to do properly as it would introduce circular dependencies
> with eg. percentages widths in the content.

Such a situation could be left undefined, just like any situation that
generates circular dependencies because of percentage lengths. IOW, it
would just fit in what the specification already declares:

Specifies a percentage width. The percentage is calculated with
respect to the width of the generated box's containing block. If the
containing block's width depends on this element's width, then the
resulting layout is undefined in CSS3.

(last sentence). Since it's quite possible to achieve what I'd like
properly in all other cases, I don't see why it shouldn't be allowed.
Enumerating all the necessary media queries to achieve the effect is
seriously bothersome, error-prone, increases the CSS file size and has
a number of other unpleasant side-effects.

Giuseppe "Oblomov" Bilotta

Received on Monday, 20 August 2012 14:03:42 UTC