nicht angemeldet
Hallo
Ich habe mal eine Beispielseite so erstellt, wie ich deine Beschreibung verstanden habe.
Das Grundproblem dabei ist, dass sich Flexbox und overflow nicht mögen. Eher sogar das Gegenteil. Warum weiß ich nicht. Da sich aber alle Browser bei der Konstellation gleich verhalten (im Gegensatz zu anderen Flexbox-Problemen) scheint das so vorgesehen zu sein.
Zunächst der Quelltext. Gekürzt, da der gesamte für das Forum zu groß ist. Die Kürzungen betreffen nur die Inhalte der Artikel, die können also einfach mit beliebigen Inhalten wieder aufgefüllt werden.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Flexbox mit overflow 03</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
<![endif]-->
<style>
@media all {
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
min-width: 0;
}
html {
font-family: sans-serif;
font-size: 100%;
line-height: 1.3;
}
h1 {
font-size: 1.2rem;
margin: 0.5rem 0 0 0;
}
h2 {
font-size: 1.2rem;
margin: 0.5rem 0 0 0;
}
p {
font-size: 1rem;
margin: 0.5rem 0 0 0;
}
}
/*Grafiken*/
@media all {
figure {
min-width: 0;
max-width: 100%;
margin: 0.5rem 0 0 0;
}
img {
/*text-align: bottom;*/
min-width: 0;
display: block;
max-width: 100%;
/*max-height: 100vh;*/
border: 0;
}
}
@media all {
body {
padding: 0 0.25rem 0.5rem 0;
margin: 0;
}
body .wrapper {
height: calc(100vh - 0.5rem);
margin: 0 0 0.5rem 0;
display: flex;
flex-direction: row-reverse;
}
body .wrapper:last-of-type {
margin: 0 0 0 0;
}
}
/*Layout Inhaltsbereich*/
@media all {
body .wrapper {
}
body .wrapper article,
body .wrapper aside {
padding: 0.5rem;
border: 3px solid gray;
margin: 0.5rem 0.25rem 0 0.25rem;
}
body>div>article {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
body>div>aside {
flex-grow: 0;
flex-shrink: 0;
flex-basis: calc(200px - 0.5rem - 6px - 0.5rem);
}
.overflow {
overflow: auto;
height: calc(100vh - 2.5rem);
}
}
/*.aside01 (Buttons, Icons)*/
@media all {
.aside01 .overflow {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.aside01 p {
background-color: orange;
color: white;
padding: 0.5rem 0.5rem;
border-radius: 0.4rem;
}
}
</style>
</head>
<body>
<div class="wrapper">
<aside class="aside01">
<div class="overflow">
<p>Icon1</p>
<p>Icon2</p>
<p>Icon3</p>
<p>Icon4</p>
</div>
</aside>
<article>
<div class="overflow">
<p>Originaldiskussion: <a href="https://forum.selfhtml.org/self/2016/nov/9/flexbox-strich-horizontale-zentrierung-auf-viewport-bezogen/1679562#m1679562">https://forum.selfhtml.org/</a></p>
<h2>Problem</h2>
<p>Es soll eine Webseite erstellt werden, die mehrere Artikel enthält. Jeder Artikel soll eine Bildschirmseite hoch sein.</p>
<p>Falls der Inhalt von Artikeln mehr Platz als die Bildschirmhöhe beansprucht soll in seiner Box ein Scrollbalken erscheinen.</p>
<p>Rechts vom Artikel soll eine schmale Box mit Icons stehen, mit denen im zugehörigen Artikel Aktionen ausgelöst werden können (Drucken, Scrollen, ...), die aber für die Problemstellung keine Rolle spielen.</p>
<p>Die Icon-Box hat eine fest hinterlegte Breite, die direkt im CSS geändert werden kann. Der nebenstehende Artikel verwendet die restliche zur Verfügung stehende Breite.</p>
<p>Responsive Design wird ausdrücklich nicht erwartet, die Webseite wird nur von bestimmten Besuchern mit Desktop-Monitoren genutzt, wobei die Monitore nicht näher definiert sind.</p>
<p>Die Besucher können so die gesamte Seite relativ fix herabscrollen, die Artikel zur durch deren Beginn (Überschrift und so weiter) zur Kenntnis nehmen und bei Wunsch sofort komplett lesen.</p>
<p>Weiterhin ist ein Layout mit Flexbox gewünscht. Die beiden nebeneinander stehen Boxen sind so gleich hoch und deren Reihenfolge kann unabhängig vom Quelltext bestimmt werden, zum Beispiel durch flex-direction.</p>
<p>Flexbox und overscroll mögen sich leider überhaupt nicht. Deshalb muss die Höhe des Platzes für overscroll fest hinterlegt werden. Und zwar die Bildschirmhöhe minus margin, border und padding.</p>
</div>
</article>
</div>
<div class="wrapper">
<aside class="aside01">
<div class="overflow">
<p>Icon1</p>
<p>Icon2</p>
<p>Icon3</p>
<p>Icon4</p>
</div>
</aside>
<article>
<div class="overflow">
<p>Originaldiskussion: <a href="https://forum.selfhtml.org/self/2016/nov/9/flexbox-strich-horizontale-zentrierung-auf-viewport-bezogen/1679562#m1679562">https://forum.selfhtml.org/</a></p>
<h2>Autobahnwahn</h2>
<p>Seit zwei Jahren ist meine Arbeit in Düsseldorf. Meine Familie lebt dagegen in Hamburg. Und dazwischen ich, aber ganz cool.</p>
<figure>
<img src="http://lorempixel.com/400/200/transport/5">
<figcaption>Teaserbild: Porsche</figcaption>
</figure>
<p>Vollbremskombination aus Ampel oder Einfädeln oder beides auf einmal. Geht nur mit Tricks. Eben noch kurz auf die A 52. Schon vielversprechend lebhaft. Hinter dem Breitscheider Kreuz geht es richtig los. Stau auf der A 3 bis Oberhausen. Danach entspannt es sich auch nur deshalb, weil enge Baustellen mit rüden Geschwindigkeitsbegrenzungen zum gleichmässigen Rollen zwingen.</p>
</div>
</article>
</div>
<div class="wrapper">
<aside class="aside01">
<div class="overflow">
<p>Icon1</p>
<p>Icon2</p>
<p>Icon3</p>
<p>Icon4</p>
</div>
</aside>
<article>
<div class="overflow">
<h2>Die Säulen der Erde</h2>
<p>Die Säulen der Erde ist ein Gesellschaftsspiel von Michael Rieneck und Stefan Stadler, das im Jahr 2006 im Kosmos-Verlag erschienen ist. Es greift die Thematik des gleichnamigen Romans von Ken Follett auf: Die Spieler beteiligen sich am Bau einer mittelalterlichen Kathedrale. Gespielt werden kann mit zwei bis vier Spielern, eine Partie dauert etwa 90 bis 120 Minuten. Als Zielgruppe werden Spieler ab zwölf Jahren angegeben.</p>
</div>
</article>
</div>
<div class="wrapper">
<aside class="aside01">
<div class="overflow">
<p>Icon1</p>
<p>Icon2</p>
<p>Icon3</p>
<p>Icon4</p>
</div>
</aside>
<article>
<div class="overflow">
<h2>Schloss La Bastie d’Urfé</h2>
<p>Das Schloss La Bastie d’Urfé (französisch Château de la Bastie d’Urfé), auch Schloss La Bâtie d’Urfé geschrieben, ist eine französische Schlossanlage in der Gemeinde Saint-Étienne-le-Molard im Département Loire.</p>
<figure>
<img src="http://lorempixel.com/400/300/city/6">
<figcaption>Teaserbild: Schloss</figcaption>
</figure>
<p>Die Anlage im Stil der Renaissance gehört zu den Loire-Schlössern und erhielt ihr heutiges Aussehen im 16. Jahrhundert durch Umbauten unter Claude d’Urfé, dem Großvater des Autors Honoré d’Urfé. Ihre Wurzeln liegen jedoch in einem festen Haus aus dem 14. Jahrhundert. Nach Aussterben der Eigentümerfamilie ging das Anwesen von Hand zu Hand, es diente ab 1872 zum Teil sogar als Fabrik. Ende des 19. Jahrhunderts verkaufte der damalige Eigentümer große Teile der kostbaren Innenausstattung an einen Antiquitätenhändler, von dem die Stücke an diverse Sammler weiterverkauft wurden.</p>
</div>
</article>
</div>
<div class="wrapper">
<aside class="aside01">
<div class="overflow">
<p>Icon1</p>
<p>Icon2</p>
<p>Icon3</p>
<p>Icon4</p>
</div>
</aside>
<article>
<div class="overflow">
<h2>Cleveland</h2>
<p>Cleveland [ˈkliːvlənd] (ursprünglich und bis 1831 Cleaveland) ist eine Stadt im Nordosten des US-Bundesstaates Ohio. Sie liegt an der Mündung des Cuyahoga River in den Eriesee und ist 213,47 km² groß.</p>
<figure>
<img src="http://lorempixel.com/400/300/city/8">
<figcaption>Teaserbild: Stadtansicht</figcaption>
</figure>
<p>Bei der Volkszählung 2010 hatte sie 396.815 Einwohner und war damit die zweitgrößte Stadt in Ohio. Cleveland ist County Seat des Cuyahoga County und geographischer, wirtschaftlicher und kultureller Mittelpunkt des Cleveland-Elyria-Mentor Metropolitan Statistical Area, des größten Ballungsraums in diesem Bundesstaat mit rund zwei Millionen Einwohnern.</p>
</div>
</article>
</div>
</body>
</html>
Und temporär der Link zu meinem Testaccount, welchen ich regelmäßig aufräume, zum direkten Ausprobieren und Rumspielen:
Gruss
MrMurphy
marctrix