Inline elements flowing into each other in flex layout

[cosmqc]

I'm trying to make a leader for a table of contents, the below sample doesn't seem to render as codepen or Safari do.
Codepen and Safari overflow onto the next line (meaning I can hide the overflow with overflow-y/setting the height), but in weasyprint, the span seems to ignore its boundary and overflow into the next box instead of wrapping.

<div class="toc-element">
  <span class="toc-label">
    Introduction
  </span>
  <span class="toc-leader">. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .</span>
  <span class="toc-pageno">4</span>
</div>

.toc-element {
  display: flex;
}

.toc-leader {
  flex: 1;
}

Expected output (codepen), each span staying/wrapping within its own container:

Actual output, spans acting if they were all just inline:

[liZe]

Hi!

Thanks for the report. I don’t get your rendering, but mine is broken too:

That’s one of many open issues about flex layout, that we’ll work on really soon.

There’s also a leader() function in WeasyPrint that you should definitely use in this case!

[liZe]

Part of the problem is the same as #1817: I can’t find anything in the Unicode specification or the CSS specification that explains why we can break lines between spaces and dots.

Let’s focus on the other part of the problem. If we replace dots by letters, we get a very ugly result too. We’ll fix this part.

[liZe]

Bug is closed in the flex branch, see #2362.