On Tue, Jun 10, 2008 at 4:24 PM, Andrew Fedoniouk <ne...@terrainformatica.com <mailto:ne...@terrainformatica.com>> wrote:

Robert O'Callahan wrote:

On Tue, Jun 10, 2008 at 2:23 PM, Andrew Fedoniouk <ne...@terrainformatica.com <mailto:ne...@terrainformatica.com> <mailto:ne...@terrainformatica.com <mailto:ne...@terrainformatica.com>>> wrote:

Robert O'Callahan wrote:

OK but how is this going to interact with the rules here, for example:

http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width

I see no problems there either. In most cases 'shrink-to-fit' is 1* exactly. Practically in all cases 'auto' value can be replaced by 1* value. 1* is a mathematically correct way of saying 'auto' :)

That doesn't answer my question. You need to extend the rules in that section to describe what happens when flexunits (not just "1*") appear for margins, padding or content.

For flow:vertical; box-sizing:content-box; ( default value )

vertical margins, paddings, content and borders in flex units share the same free space. So for style:

div.inner { padding:1* 0; }

This markup <div style="height:YYpx; flow:vertical"> <div class=inner>First</div> <div class=inner>Second</div> </div>

will be rendered as

|------------ | |First | | |Second | |------------

Rule is simple: free space is distributed among all lengths in the direction in the block that establishes box with free space.

What does that have to do with absolute positioning and http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width ?

Consider this:

<div style="overflow:hidden; width:xx; height:yy"> <img align=left id=first /> <p flex=1>...</p> <img align=left id=second /> </div>

You will have *exactly* the same kind of problems.

No. The flex on the <p> is ignored because the container is not a flexbox. If the container was a flexbox, then the <img> elements would not float.

Exactly the same thing as with flex units. Just replace 'flexbox' by 'flow'.

OK. So 'flow' creates something like a flexbox. One difference is that all features of CSS are available inside 'flow' except for features that cause trouble, like floats, which you disable when you discover they cause problems. But the only features available inside flexbox are ones we explicitly allow. Another difference is that you have to specify how 'flow' interacts with the various display types, whereas since flexboxes are their own display type that isn't an issue.

A few more questions about flex-units:

Does 'flow' apply to inline elements? If so, what does 'flow:vertical' do on an inline element?

How do flexunits work on inline elements that break across multiple lines? e.g <span style="font-size:50px;">Foo</span> <span style="padding-top:1*">A<br>B<br>C</span> <span style="font-size:80px;">qux</span> Which line box(es) are used to determine the padding? Does each line of the <span> actually get a different padding?

How do flexunits interact with absolute positioning and auto top/left? Is the hypothetical position for the content computed taking flexunit margins/padding on the content into account?