basti1012.bplaced.net

Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
    Kann mir hier bitte einer bei meinem Problem helfen und mich auf meine Denkfehler hinweisen? Pre stört sich nicht an der Breite des übergeordneten Elements. Ich habe es extra auf 200px gesetzt, damit man es sofort sieht.

    Code

                                        
                                    <!doctype html>
    <html>
    
    <head>
      <style>
        * {
          font-family: system-ui;
          box-sizing: border-box;
          margin: 0;
          padding: 0;
        }
    
        html {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
        }
    
        body {
          width: 90%;
          background: #eee;
          min-height: 100vh;
          max-width: 200px;
          display: flex;
          flex-direction: column;
        }
    
        pre {
          width: 100%;
          margin: 2em 0;
          background: #fafafa;
          overflow-x: auto;
          padding: 0 1em;
        }
    
        main {
          display: flex;
          flex: 1;
          flex-direction: column;
        }
    
        footer,
        header,
        nav,
        body {
          border: 1px solid grey;
        }
      </style>
    </head>
    
    <body>
      <header>
        <p>Header</p>
      </header>
      <nav>Navigation</nav>
      <main>
        <h1>Main</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia esse recusandae id enim, porro explicabo maiores minima sapiente numquam. Quo?
        </p>
        <pre><code>&lt;script&gt;
      alert('Diese Zeile zerhaut das Layout komlett, eigentlich sollte alles maximal 200px breit sein');
      console.log('test')
    &lt;/script&gt;</code>
        </pre>
      </main>
      <footer>
        <p>footer</p>
      </footer>
    </body>
    
    </html>