Abend,
ich habe den nachfolgenden Quelltext:
HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
font-family: monospace;
font-size: 14px;
}
html{
height: 100%;
width: 100%;
display: table;
}
body {
display: table-cell;
vertical-align: middle;
}
.flex-container {
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
flex-direction: column;
width: 100vw;
height: 100vh;
}
.navigation {
flex-basis: auto;
}
.maincontent {
flex-basis: auto;
flex-grow: 1;
border: 1px solid red;
padding: 5px;
}
.flex-container-navigation {
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 2px 5px 2px 5px;
}
.headline {
flex-basis: auto;
}
.wrapper {
display: flex;
flex-direction: row;
}
aside.left-container {
display:flex;
display: -webkit-flex;
display: -ms-flexbox;
flex-direction: column;
flex-basis: auto;
}
div.left-container.left1 {
flex-basis: auto;
background: #AAAAAA;
}
div.left-container.left2 {
flex-basis: auto;
background: #AAAA88;
}
div.left-container.left3 {
flex-basis: auto;
background: #AA00CC;
}
aside.right-container {
display:flex;
display: -webkit-flex;
display: -ms-flexbox;
flex-direction: column;
flex-basis: auto;
flex-grow: 1;
}
div.right-container.right1 {
flex-basis: auto;
background: #AAAA00;
}
div.right-container.right2 {
flex: 1;
background: green;
overflow-x: auto;
overflow-y: auto;
white-space: nowrap;
}
div.right-container.right3 {
flex-basis: auto;
background: #AAAAFF;
}
.dropdown {
position: relative;
display: inline-block;
background: white;
}
.dropdown > input[type="checkbox"] {
position: absolute;
left: -100vw;
}
.dropdown > label,
.dropdown > a[role="button"] {
display: inline-block;
padding: 5px;
border: 1px solid black;
}
.dropdown > label:after,
.dropdown > a[role="button"]:after {
content: "\f0d7";
font-family: FontAwesome;
display: inline-block;
}
.dropdown > ul {
position: absolute;
z-index: 999;
display: block;
left: -100vw;
top: calc(1.5em + 14px);
border: 1px solid black;
background: white;
padding: 5px;
margin: 0;
width: calc(100% - 12px);
cursor: pointer;
}
.dropdown > ul li:hover,
.dropdown > ul li:focus {
background: #A9BCF5;
}
.dropdown > input[type="checkbox"]:checked ~ ul,
.dropdown > ul:target {
left: 0;
}
.list > ul {
position: relative;
left: 0;
display: inline-block;
border: 1px solid black;
padding: 5px;
background: white;
width: calc(100% - 12px);
}
.list > ul > li{
list-style:none;
}
button{
font-size: 14px;
font-family: monospace;
padding: 0px;
width: 100%;
left: 0;
border: 0px;
background: white;
text-align: left;
}
button:hover{
background: lightblue;
}
</style>
</head>
<body>
<FORM target="_self" action="" method="post">
<div class="flex-container">
<div class="navigation">
<div class="flex-container-navigation">
<div class="headline">
<button type="submit" name="headline" value="" style="border: 0px; margin: 0px; padding: 0px; background: none; cursor: pointer;">
<p style="font-size: 30px; font-family: Coolvetica; font-weight: bold; margin: 0px; display: inline;">HEADLINE</p>
</button>
</div>
</div>
</div>
<div class="maincontent">
<div class="wrapper">
<aside class="left-container">
<div class="left-container left1">
<div class="dropdown">
<input type="checkbox" id="my-dropdown" value="" name="my-checkbox">
<label for="my-dropdown" data-toggle="dropdown"> Alle anzeigen </label>
<ul>
<li>
<button type="submit" name="b1" value="file1" style="border: 0px; margin: 0px; padding: 0px; background: none; cursor: pointer;">
<p style="font-size: 14px; margin: 0px; display: inline;">file1</p>
</button>
</li>
<li>
<button type="submit" name="b1" value="file2" style="border: 0px; margin: 0px; padding: 0px; background: none; cursor: pointer;">
<p style="font-size: 14px; margin: 0px; display: inline;">file2</p>
</button>
</li>
<li>
<button type="submit" name="b1" value="filename länger als normal" style="border: 0px; margin: 0px; padding: 0px; background: none; cursor: pointer;">
<p style="font-size: 14px; margin: 0px; display: inline;">filename laenger als normal</p>
</button>
</li>
</ul>
</div>
</div>
<div class="left-container left2">
<div class="list">
<ul>
<li>
<button type="submit" name="b2" value="b2">text1</button>
<button type="submit" name="b2" value="b2">text2</button>
<button type="submit" name="b2" value="b2">text3</button>
<button type="submit" name="b2" value="b2">text4</button>
</li>
</ul>
</div>
</div>
<div class="left-container left3"> left3 </div>
</aside>
<aside class="right-container">
<div class="right-container right1"> right1</div>
<div class="right-container right2">
<div style="height: 100%; width: 100%;"> Das ist eine ziemliche lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange Textzeile, welche nicht umgebrochen werden soll
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>Das ist eine ziemliche lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange Textzeile, welche nicht umgebrochen werden soll
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br> </div>
</div>
<div class="right-container right3"> right3 </div>
</aside>
</div>
</div>
</div>
</FORM>
</body>
</html>
Mein Problem ist, dass die Scrollbars nicht den Container "right2" scrollbar machen, sondern anscheinend den ganzen body-Bereich der Seite!
Ich wünsche schon jetzt einmal allen ein frohes neues Jahr im Vorraus !!!