Re: [css3-writing-modes] height: fill-available's behavior is suboptimal

On Thu, Jun 7, 2012 at 8:34 PM, L. David Baron <dbaron@dbaron.org> wrote:

> On Thursday 2012-06-07 17:23 -0700, Tab Atkins Jr. wrote:
> > Right now, fill-available is defined as taking the width/height of the
> > containing block and subtracting the element's relevant box-model
> > properties, so it fills up the containing block entirely.  This works
> > fine for 'width', given the way that various defaults work, but it's
> > bad for 'height'.
> >
> > Ideally, height:fill-available would work similarly to how height:100%
> > does in quirks mode - it walks up the tree until it finds a box with a
> > defined height (stopping at the ICB), and sets itself to that height
> > minus the box-model props.
> >
> > We could make it so that a height:min-content or height:fit-content on
> > the ancestor tree also stops the walk, and makes fill-available
> > resolve to the auto height instead, if we really want a switch.
> >
> > Without this change, height:fill-available is about as useless as
> > height:100% is today - for it to do anything, you have to manually set
> > it on all the ancestors too.
>
> The quirks mode behavior is complicated for implementations and
> requires disabling some speed optimizations.
>
> I'm also not sure it's all that useful given that in many cases you
> do want to subtract margin/border/padding rather than have the same
> value as the parent or ancestor.
>
>
> What I might really want this to do is have the behavior I described
> in http://lists.w3.org/Archives/Public/www-style/2009Nov/0286.html .
> How does the current definition differ from this?
>

You suggestion in the linked thread makes sense to me. You are totally
right that the quirks behavior is actually not what developers want,
although it's much closer than the standards behavior or what's currently
specced for fill-available.

Specifically, you suggestion makes the following case work much better:
http://plexode.com/u/#2N0px2L%3C2K%3EEJ4olor*II)height6H%3B!6G%2F729%22M8padding*27divr4Hbackground-c6*%3A!b)!style%3D9Q(K%0AL2!%20~http://plexode.com/eval3quirks/#ht=L7!id%3DouterI*10NH82NHoutline*5px!solid!blue9(7)81NJgreen9(7I%3A100%25Jorange9KLG(G(GK
<div id=outer style="height: 100px; padding: 20px; outline: 5px solid blue">
    <div style="padding: 10px; background-color: green">
        <div style="height:100%; background-color: orange"></div>
    </div>
</div>

I'm torn on the special-casing of *-content. In the block direction,
*-content are defined as being equivalent to auto, so they should go down
the auto codepath in your algorithm regardless. In the inline direction,
I'm thinking of the following case:
<div style="width: 1000px">
    <div id=outer style="width: min-content">
        <div id=inner style="width: 50%"><div style="display:inline-block;
width: 100px"></div></div>
    </div>
</div>

Should the inner div be width 50px or 500px? It's not clear to me which is
better.

Ojan