Posted 4 months ago. Visible to the public.

Flexbox: How to prevent <pre> elements from overflowing

I recently had the problem that embedded code boxes crashed my layout.

It turned out that pres break out of their containers when using them inside a deeper nested flex layout.
For me it was a flex inside a flex item (fleXzibit).

Image

Copy
<div class="flex"> <div class="flex-item"> ... <div class="nested-flex"> <div class="nested-flex-item"> <pre>A code example</pre> </div> </div> ... </div> </div>

The reason is that flexbox items default to min-width: auto, which leads to issues in calculating the available space for these pre elements. See: https://stackoverflow.com/a/28909778 Archive

You can prevent this by adding the following to your CSS:

Note

min-width: stretch is an experimental feature Archive

Copy
pre { min-width: -webkit-fill-available; min-width: -moz-available; min-width: stretch; max-width: 0; }

You may know white-space: pre-wrap, but in most cases this is not what you want here. It simply prevents horizontal scrollbars and wraps the text inside the box at its maximum width without any indentation. This will make code blocks difficult to read.

See also:

Does your version of Ruby on Rails still receive security updates?
Rails LTS provides security patches for unsupported versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2).

Owner of this card:

Avatar
Florian Leinsinger
Last edit:
4 months ago
by Florian Leinsinger
Attachments:
overflowing.gif
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Florian Leinsinger to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more