Flexible area inside a fixed area - how to do this?

Hello!
https://codepen.io/Novumel/pen/WNvjNNr?editors=1100
I need to make the area with < code > able to stretch (a scrollbar must appears), and the width of the text remains unchanged at the same time. As soon as I put white-space: pre; for the tag < code > (now it’s not in the project), the text area begins to depend on the < code > area.
I tried to write all max-width for text and for < code > with Media queries, but this is a lot of unjustified work.
Sorry in advance if my description is not clear.

I’m not sure what you’re looking for. It looks like your page is fine when I am testing the responsiveness of it. The code scales very well.

Are you trying to have it so all of your < code > is on one line?

yes, you’re right. My page is ok until I add white-space: pre for < code >.

I’m not sure what you’re trying to do. When adding white-space: pre; to the code declaration in CSS it’s saying to preserve the whitespace and line breaks as you typed then into the HTML section.
It’s the same as surrounding the <code> </code> tags with <pre> </pre> tags.

Why would you have a scrollbar when something stretches? Did you mean when it’s made smaller?
You have something in mind but we’re not understanding what you’re trying to accomplish.

1 Like

Without code {white-space: pre;}
code1

With code {white-space: pre;} and max-with 400px
code with pre, screen max-width 400px

I need like that (scroll-x):
example1

You need to set display: block; for code as well as add overflow-x: scroll;

Quick demo :point_left:

I had display:block before. I’ve added scroll now. But it doesn’t work.

I don’t see where you put max-width here

I mean width of the screen.
On a wide screen the page looks ok. But as soon as the longest line of the < code > ceases to fit in the width of the text area, everything goes beyond the viewing area.