Every other layout example here is filled with content that behaves, and a layout only fails on the content that does not. This is the layouts of the theme holding five things chosen to break them: a string with nowhere to wrap, a table wider than the column it sits in, the same sentence inside a text format and outside one, an image and an iframe that arrive already knowing how wide they want to be, and a select sized by its longest option. Three questions are being asked of each. Does the track hold -- a grid or flex child is "min-width: auto" until told otherwise, so a column holding one unbreakable token would widen itself and the layout that placed it could do nothing about it. Is the guard where the content is. And does the escape work -- a table too wide to fit is fine as long as it scrolls inside its own wrapper rather than taking the document with it. They hold, and they hold for reasons worth knowing: the column grid sizes its tracks from leftover space and sets "min-width: 0" on its children, the regions inside it do the same for theirs, the layout wrapper breaks long words on its own account, and a wide table gets a wrapper allowed to be narrower than it is. Take any one of those away and one of these sections gives. So the way to read this page is that there is nothing to see: no section may move the document sideways at any width, and the check is the bottom of the window rather than the columns. One thing is worth looking at rather than past -- the pair of boxes holding the same sentence, where the unformatted one has a line that runs past its edge, because the theme hangs its long-word break on the wrapper processed text arrives in and most of an administrative page never sees one. That box scrolls rather than spilling, so the difference stays inside the demonstration.
A column holding something that cannot wrap
The narrow column holds four values of the kind a real site puts there: a file URL, a machine name, a path on disk, and a token with no break opportunity in it at all. The threat is that a grid child is "min-width: auto" until told otherwise, which reads as "at least as wide as the longest thing I cannot break": a column like this one would then refuse the fraction the layout gave it, take the width from the column beside it, and push the rest off the side of the page. It holds, and it is worth knowing that it holds twice over. The grid sizes its tracks from leftover space and puts "min-width: 0" on every child, so no child can announce a minimum; and the layout wrapper carries the "word-break" utility, so the strings are broken rather than being allowed to be wide in the first place. Either would be enough. Remove both and this is the section that fails first.
A table wider than the column it is in
The same layout, with a table in the narrow column that is wider than the column could ever be. This is the case that is allowed to overflow -- a table of twelve columns is not going to fit beside anything, and squeezing it until every heading breaks in half is worse than letting it scroll. What matters is where it scrolls: inside its own wrapper, or by taking the page with it. The wrapper only manages the first if it is allowed to be narrower than the table inside it, which is the same "min-width: 0" one level further down, and it is why the rule is written out in the theme rather than applied as a utility.
The same paragraph, formatted and not
The same sentence twice, holding the same unbreakable token: once inside the class processed text arrives in, once as a paragraph printed straight out of a render array. Both are held to the same measure, and the difference is the line in the second box that carries on past the edge of it. The theme breaks long words inside the first and has nothing to say about the second, which is worth knowing precisely because most of an administrative page -- a description under a field, a message, a summary in a form, nearly everything in this library -- is the second kind. This pair is deliberately not in the layout above: that layout carries the "word-break" utility, which breaks everything inside it and would hide the difference entirely. Which is the real lesson here. The guard is not so much missing as scattered, and whether a given string wraps depends on which of two unrelated wrappers it happens to be inside. The boxes scroll rather than spilling, so what is being shown stays inside the demonstration.
Inside a text format
The scheduled publish failed and the log gave the token it was holding, which was c2NoZWR1bGVkX3B1Ymxpc2hfdG9rZW5fZm9yX3RoZV9hdWd1c3RfcmVsZWFzZV9ub3RfYV9yZWFsX3NlY3JldA -- and the token is the whole of the clue, so nothing here is allowed to trim it.
Straight from a render array
The scheduled publish failed and the log gave the token it was holding, which was c2NoZWR1bGVkX3B1Ymxpc2hfdG9rZW5fZm9yX3RoZV9hdWd1c3RfcmVsZWFzZV9ub3RfYV9yZWFsX3NlY3JldA -- and the token is the whole of the clue, so nothing here is allowed to trim it.
Content that declares its own size
An image with an intrinsic width of 2400 pixels, an iframe asking for 1600, and a block of preformatted text whose lines do not wrap by definition. These are the three things on a page that arrive already knowing how wide they want to be, and the theme answers each differently: the image and the iframe are capped at the width of whatever holds them, and the preformatted block is allowed to keep its lines and scroll them. That last one is a display of "grid" rather than "block", which looks arbitrary until this page: a block-level pre inside a grid or flex parent takes its width from its longest line instead of from its parent, and scrolls nothing.
Form controls with more in them than they were drawn for
The control that is hardest to hold, in both columns so the narrow one can be compared with the wide. A select sizes itself to its longest option -- the theme gives it "width: max-content" -- and an option is a string somebody typed into a taxonomy term or a content type label, so it is the one control that regularly turns out wider than the column it is in. The cap on it is "max-width: 100%", which is not on its own enough: a percentage maximum is ignored while a browser works out how narrow a thing is allowed to be, so the control still offers its longest option as its minimum. Whether that minimum is taken up belongs to the grid the control is in, which is why the regions of the layout set "min-width: 0" on their own children as well as the column grid setting it on theirs. With both in place the select is capped at the column and the column keeps its track.