Consider following markup: <div> some text <foo>first</foo><bar>second</bar> </div> There is no way in CSS at the moment to define content flo

Consider following markup: <div> some text <foo>first</foo><bar>second</bar> </div> There is no way in CSS at the moment to define content flow of the div above. The only possible way is to define `display` on its children. Say, you want that div to replace content vertically as if all children are blocks and text runs are wrapped into anonymous paragraphs: <div> <p.anonymous>some text</p> <block.foo>first</block> <block.bar>second</block> </div> That's impossible in modern CSS without redefining `display` in children. But usually you cannot blindly say div > * { display:block;} What if some child uses `display:flex` ? Problem is that `display` defines how element is replaced among its siblings. But not how its children are laid out. At some point it was a proposal to add `display-model` css property. So you can have div { display: block; display-model:flex | table | etc } Without it we have ugly semi-solution of combinatorial explosion: div { display: flex; } div { display: inline-flex; } div { display: table } div { display: inline-table; } div { display: grid; } div { display: inline-grid; } ...