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.
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;
}
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><script>
alert('Diese Zeile zerhaut das Layout komlett, eigentlich sollte alles maximal 200px breit sein');
console.log('test')
</script></code>
</pre>
</main>
<footer>
<p>footer</p>
</footer>
</body>
</html>