Bug 103163 – [CSS Regions] CSS Regions don't work with CSS Flexbox

• Component: CSS
• Status: RESOLVED INVALID

[Mike Sierra]

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.

[Mihnea Ovidenie]

(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.

[Mike Sierra]

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

[Johannes Wilm]

works fine for here. Check https://github.com/sourcefabric/BookJS/blob/master/book.js

[Mihnea Ovidenie]

Hey Mike, any news on this one? Should we keep it open?

[Mike Sierra]

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

[Mihnea Ovidenie]

Close it as the below comments indicate that regions as flex-items are working properly.