Resizable Flexbox

by Rolf

HTML

<header><h1>Durch die Wüste</h1></header>
<main>
  <nav>
  <ul>
  <li>Ein Todesritt</li>
  <li>Vor Gericht</li>
  <li>Im Harem</li>
  </ul>
  </nav>
  <article>
<header><p>ERSTES KAPITEL</p>
<h2>Ein Todesritt</h2></header>
<p>„Und ist es wirklich wahr, Sihdi (* Herr.), daß du ein Giaur bleiben willst,
ein Ungläubiger, welcher verächtlicher ist als ein Hund, widerlicher als eine
Ratte, die nur Verfaultes frißt?“</p>
<p>„Ja,“ antwortete ich.</p>
<p>„Effendi, ich hasse die Ungläubigen und gönne es ihnen, daß sie nach ihrem Tode 
in die Dschehenna kommen, wo der Teufel wohnt; aber dich möchte ich retten vor dem
ewigen Verderben, welches dich ereilen wird, wenn du dich nicht zum Ikrar bil Lisan,
zum heiligen Zeugnisse, bekennst. Du bist so gut, so ganz anders als andere Sihdis, 
denen ich gedient habe, und darum werde ich dich bekehren, du magst wollen oder
nicht.“</p>
<p>So sprach Halef, mein Diener und Wegweiser, mit dem ich in den Schluchten und
Klüften des Dschebel Aures herumgekrochen und dann nach dem Dra el Haua
heruntergestiegen war, um über den Dschebel Tarfaui nach Seddada, Kris und
Dgasche zu kommen, von welchen Orten aus ein Weg über den berüchtigten Schott
Dscherid nach Fetnassa und Kbilli führt.</p>
</article>
</main>

CSS

body {
  background-color: #eeb;
  margin: 0 auto;
  max-width: 50em;
}
body > header {
  text-align:center;
  font: bold 2em sans-serif;
  border-bottom: 8px ridge red;
}
body > header h1 {
  font-size: 1.5em;
  margin: 0.2em;
}
main {
  display: flex;
  min-height: 50vh;
}
article header {
  font: 1.3em sans-serif;
  text-align: center;
}
article header > * {
  margin: 0.2em;
}
article {
  margin-left: 1em;
  flex: 1 0 20em;
}
nav {
  flex: 0 0 auto;
  width: 10em;
  min-width: 5em;
  max-width: 20em;
  border-right: 2px dashed #863;
  resize: horizontal;
  overflow: auto;
  padding: 0.5em;
}
nav ul {
  list-style: none;
  padding: 0; margin: 0;
}