@Close-voters: what "details or clarity" is lacking? Do you want me to explain what a flexbox and a float is?
float: right doesn't work inside a flexbox. (It doesn't float right, and it doesn't span several rows.)
Please advise how to achieve a layout that corresponds to a flexbox containing large floats that span several rows. It doesn't have to be a flexbox, but ideally it shouldn't be too hacky (such as painting on a <canvas>).
.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>