Question

I have a strange behaviour on my pre-Tags in HTML.

My general setup:
I am using angular 1.6.x with angular material. The material design has a sidebar on the left that can be toggled on small devices but is fixed on bigger screens.
Some markdown will be loaded through a REST API and then be places in an angular-markdown-it tag. But when there is markdown program code that is, after parsing to html, longer then the windows screen of the user, the code tag inside the generated pre tag will force the body to extend over the width=100%.

But why?
The generated code lookes like this:

<pre>
    <code>
        Some very long code or centense that will be longer then the body width because the window of the user is smaller
    </code>
</pre>

And I now whant the same behaviour like here on stackoverflow:
When the code is longer then the body, then the pre-Tag should get a overflow-x scroll.

But even when I try to orient the stackoverflow code, it will not work on my own side:

pre{
  word-wrap: normal;
  width: auto;
  overflow: auto;

  & > code{
    white-space: inherit;
    padding: 0;
    display: block;
  }
}

Here is the example of the website with the correct body width:
http://79.251.184.85:9915/

And here is the side with the parsed markdown that has a wrong body width:
http://79.251.184.85:9915/wiki/3

(sorry, no fiddle. Not sure if this problem is reproducible there.)

What am I doing so terribly wrong?
Thanks for any help.

<pre> tag scales over width=100%

0 个答案: