0

I have some source code in <pre> tags which I would like to scroll when the browser window is resized. The pre tags are contained in a flex box, with the containing div set to flex: 1.

How can I make the code scroll horizontally?

<div style="display: flex;">
  <div style="flex: 1;">
    <div style="max-width: 100%; overflow-x: auto; min-width: 0;">
      <pre>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
        </pre>
    </div>
  </div>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
mme
  • 167
  • 1
  • 8

1 Answers1

1
<div style="flex: 1; width:10px;">

Give width to your flex child, because flex children need a base width to control the overflow of their children in percentage, your max-width:100% will check for the parent fixed width and when there is no width it will break out, but when you give flex:1 a width, display flex will adjust its width, and percentage width of the child will also work (NOTE: you can change 10px to any that you want in browsers not support flex)

bibin antony
  • 293
  • 1
  • 5