pre zerhaut Layout

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.
Kommentar abgeben zu diesen Beitrag/Code ?
Dann hier klicken

Der hier verwendete 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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX