Re: [css3-flexbox] alignment and overflow:scroll

On Mon, Mar 11, 2013 at 3:56 PM, Tony Chang <tony@chromium.org> wrote:
> I'm confused about the order in which we apply alignment and overflow on the
> flexbox.  Here's an example with stretching:
>
> <div style="display: flexbox; overflow: scroll; height: 100px;">
>   <img intrinsic-height=200px>
> </div>
>
> Should the image resize to a height 100px with no scrollbar on the flexbox
> or should the image stay at 200px and the flexbox get a scrollbar?
>
> Here's a similar example:
> <div style="display: flexbox; overflow: scroll; height: 100px;">
>   <img intrinsic-height=200px style="item-align: flex-end">
> </div>
>
> Where is the cross-end?  Is it the bottom of the flexbox (100px), causing
> the flexbox to overflow out the top, or should the scrollable area extend to
> 200px tall?
>
> Should absolutely positioned flex items also increase the size of the
> scrollable area and change the position of cross-end?  This is further
> confused in the wrap-reverse case where the cross-start is the bottom of the
> flexbox (we need to resolve absolute position to determine the scrollable
> area size, but absolutely positioned items will move during wrap-reverse
> after we've computed the scrollable area size).
>

When content of flexbox overflows it means that there is no free space in
that direction and so flexbox should use normal CSS rules for placing content
(modulo layout flow).

And align-items:flex-end should align the item against
content-outline-box (scrollWidth/Height [1])
but not its content-box.

[1] https://developer.mozilla.org/en-US/docs/DOM/element.scrollHeight

-- 
Andrew Fedoniouk.

http://terrainformatica.com

Received on Tuesday, 12 March 2013 02:56:39 UTC