Bug 103163 - [CSS Regions] CSS Regions don't work with CSS Flexbox
Summary: [CSS Regions] CSS Regions don't work with CSS Flexbox
Status: RESOLVED INVALID
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL: https://github.com/mike-sierra/webpla...
Keywords: AdobeTracked
Depends on:
Blocks: 57312
  Show dependency treegraph
 
Reported: 2012-11-23 18:06 PST by Mike Sierra
Modified: 2013-04-23 04:32 PDT (History)
3 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Mike Sierra 2012-11-23 18:06:10 PST
Copy HTML from URL and open with Canary.  Two-column layout relies on
the latest flexbox spec:
https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes
The col1/col2 text (yellow) should display default ARTICLE content,
threaded through the multipage layout.  First full-width pull (pink)
should display article's H1 title content.  First page's partial-width
pull should display article's ASIDE content. Flexbox layout works OK,
but regions don't.

This other test, which relies on an older flexbox implementation,
shows better results, though not perfect:
https://github.com/mike-sierra/webplatform/blob/master/examples/bugFlexOld.html
The green column regions correctly display the main ARTICLE flow.  The
coral area correctly displays a FIGURE diverted from the article.
However, the pink region at top of first page should display article's
H1 content.
Comment 1 Mihnea Ovidenie 2012-12-07 01:52:32 PST
(In reply to comment #0)
> Copy HTML from URL and open with Canary.  Two-column layout relies on
> the latest flexbox spec:
> https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes
> The col1/col2 text (yellow) should display default ARTICLE content,
> threaded through the multipage layout.  First full-width pull (pink)
> should display article's H1 title content.  First page's partial-width
> pull should display article's ASIDE content. Flexbox layout works OK,
> but regions don't.
> 
> This other test, which relies on an older flexbox implementation,
> shows better results, though not perfect:
> https://github.com/mike-sierra/webplatform/blob/master/examples/bugFlexOld.html
> The green column regions correctly display the main ARTICLE flow.  The
> coral area correctly displays a FIGURE diverted from the article.
> However, the pink region at top of first page should display article's
> H1 content.

Hi Mike,

Per regions spec:
"Note 
At the time of this note-writing, the display values that always result in a non-replaced block container include block, inline-block, table-cell, table-caption, and list-item. All of these display values work as regions with non-replaced elements."

This means that you cannot make an item with diplay: flex/inline-flex a region, to get the content from a named flow.

You can combine regions and flex-box, by having regions (with auto-size support) as flex items.
Comment 2 Mike Sierra 2012-12-07 03:20:40 PST
Sorry I missed that. Was thrown by the fact that the older display:box sort of works. I'll try to nest some blocks & see how the region breaks interact with flexbox. Thanks
Comment 3 Johannes Wilm 2012-12-18 08:18:25 PST
works fine for here. Check https://github.com/sourcefabric/BookJS/blob/master/book.js
Comment 4 Mihnea Ovidenie 2013-02-18 23:30:26 PST
Hey Mike, any news on this one? Should we keep it open?
Comment 5 Mike Sierra 2013-02-19 04:54:16 PST
Close it. I didn't catch that detail from the spec. Got a basic layout to work after nesting a block within a flex element: http://letmespellitoutforyou.com/samples/region_exclude.html  But if #104928 were resolved, I could implement the other cool demo feature I had in mind. Thanx
Comment 6 Mihnea Ovidenie 2013-04-23 04:32:40 PDT
Close it as the below comments indicate that regions as flex-items are working properly.