[css-flexbox] Flex box does not respect inline children/groupings

I recently made a chrome issue(
https://code.google.com/p/chromium/issues/detail?id=342243) on it and I
thought I would bring it here to a more general audience.

I think that inline elements should be clumped with "contiguous run[s] of
text"(http://www.w3.org/TR/css3-flexbox/#flex-item) to form a single flex
item:
*(text-node)+(inline-element)+(text-node)+(more-inline-elements)=(flex-item)*

Currently Chrome 32, FF 27, Opera 19 break up inline elements into separate
flex items

Not breaking up contiguous inline elements + text nodes especially makes
sense especially with this use case:
HTML:
*<div class="flex">*

* Heya, <span>nice</span> day isn't it*
*</div>*

Will be rendered on each line like with `flex-direction: column`.
Heya,
nice
day isn't it

*See demo:* http://jsfiddle.net/MadLittleMods/kSY5t/

Of course this effect can easily be mitigated in the current state of
things by just wrapping everything you want to actually act inline as one
in another element.
*<div class="flex">*
* <div>*
* Heya, <span>nice</span> day isn't it*
* </div>*
*</div>*

Renders:
Heya, nice day isn't it


*To quote something I wrote in the chrome issue:*



*"Although it would slightly break the layout of some sites. It is
extremely easy to fix and someone using the flex box model at this point in
time is probably pretty proactive at getting their site fully functional
again. I doubt this will affect many peoples layout as most will not be
using inline nodes as flex items.For the flex model's sake I would rather
make the change that effects only a tiny portion of early adopters
(remember only inline nodes affected)."*

Received on Tuesday, 18 February 2014 17:30:05 UTC