How to limit 'pre' tag width inside "flex" container?

Question

It seems that pre tag behaves differently if placed inside block layout and flex layout item:

  <div>
    <pre style="background-color: green;">
      aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </pre>
  </div>
  <div style="display: flex;">
    <pre style="background-color: blue;">
      aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </pre>
  </div>

First pre (marked with green background) is correctly sized by parent div's width (page width). But second pre that is placed inside flex container seems to have maximum width and spawns beyond page width. This happens only if pre have long words. Any ways I can correctly limit second pre's width without hacks like explicitly specifying it or cutting out exceeding text via overflow: hidden? I have tried white-space: pre-wrap; but it doesn't make any difference :(

score 11 · Accepted Answer · answered Aug 16 '15 at 17:57

11

Seems a famouse min-width: 0 problem. Flexbox introduced new auto value for min-width that do lots of weird things. Setting it to 0 for pre element makes it's width be as expected.

answered Aug 16 '15 at 17:57

grigoryvp

40,413
64
174
277

3

I found that `min-width: 0` was needed for every child of the flex container, all the way until the `pre` tag – theicfire Nov 12 '20 at 07:21
If you can, try `* : {min-width: 0}` – nikhilweee Mar 13 '22 at 09:05

score 0 · Answer 2 · answered Aug 16 '15 at 13:12

0

Try white-space: nowrap; text-overflow: ellipsis; overflow: hidden;

answered Aug 16 '15 at 13:12

David Abaev

690
5
22

`overflow: hidden` works, but is it possible to limit width while still being able to display all text? I want to display code samples, and hiding overflow will be kinda overkill – grigoryvp Aug 16 '15 at 13:20

How to limit 'pre' tag width inside "flex" container?

2 Answers2