In HTML, an element is in flow or out of flow.
float: right can be used to take elements out of flow.
In-flow and out-of-flow elements can be combined, i.e. some elements can be in flow while others float out of flow next to them.
A flexbox (particularly with flex: auto) can be used to automatically nicely adjust the size of in-flow elements.
But using a flexbox to slightly adjust in-flow elements completely breaks out-of-flow elements: The float: right element stops floating right, and stops spanning several rows:
.container { display: flex; flex-wrap: wrap; align-items: stretch;}.container span { flex: auto; background-color: gray;}.container .float { float: right; background-color: yellow;}* { border: 1px solid black; margin: 1px; padding: 1px;}<div class="container">flexbox<span class="float">multiline<br>float</span><span>element with much content</span><span>element with much content</span><span>element with much content</span><span>element with much content</span><span>element with much content</span><span>element with much content</span><span>element with much content</span><span>element with much content</span><span>element with much content</span><span>element with much content</span></div>How can a layout be achieved where some elements have automatically adjusted sizes (like they would with flex: auto) while other large elements float and span several rows? Ideally, it shouldn't be too hacky (such as painting on a <canvas>).