Leider ja... ich habe es jetzt mal so gestaltet, dass wenn im div-Container(unter right2) nichts steht, dass er den div auf 100%-Höhe und Weite in seinen Grenzen setzt --> So soll er leer aussehen.
Ziel ist jetzt, dass wenn Text dazu kommt, dass sich nichts verschiebt und die Scrollbars vom oben genannten Div-Container mit eingeblendet werden um den Text zu scrollen.
HTML-Code:
<!DOCTYPE html>
<html lang="de">
<head>
<title>Flexlauout</title>
<style>
* {
margin: 0;
padding: 0;
font-family: monospace;
font-size: 14px;
}
.flex-container {
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
flex-direction: column;
width: 100vw;
height: 100vh;
}
.maincontent {
flex-basis: auto;
flex-grow: 1;
border: 1px solid red;
padding: 5px;
}
.navigation {
hmax-height:60px;
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
align-items: center;
justify-content: center;
padding: 2px 5px 2px 5px;
}
#but1{
font-size: 30px;
font-family: Coolvetica;
font-weight: bold;
text-align:center;
border: 0px;
cursor: pointer;
}
.wrapper {
display: flex;
flex-direction: row;
min-height:calc(100vh - 60px);
}
aside.left-container {
display:flex;
display: -webkit-flex;
display: -ms-flexbox;
flex-direction: column;
flex-basis: auto;
flex-grow: 1;
}
div.left-container.left1 {
background: #AAAAAA;
}
div.left-container.left2 {
flex: 2 1 auto;
align-self: flex-start;
background: #AAAA88;
}
div.left-container.left3 {
justify-content:flex-end;
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 {
border: 1px solid black;
padding: 5px;
}
div.right-container.right2 {
flex: 1;
border: 1px solid black;
margin-top: 5px;
padding: 0px;
}
div.right-container.right3 {
border: 1px solid black;
margin-top: 5px;
padding: 5px;
}
.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;
list-style:none;
}
.dropdown > ul li:hover,
.dropdown > ul li:focus {
background: #A9BCF5;
}
.dropdown > input[type="checkbox"]:checked ~ ul,
.dropdown > ul:target {
left: 0;
}
.left2 >.list{
border: 1px solid black;
padding: 5px;
background: white;
}
.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;
}
#but2,#but3,#but4{
border: 0px;
margin: 0px;
padding: 0px;
background: none;
cursor: pointer;
}
</style>
</head>
<body>
<form target="_self" action="" method="post">
<div class="flex-container">
<div class="navigation">
<button id="but1" type="submit" name="headline">
HEADLINE
</button>
</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" id="but2">
<p>file1</p>
</button>
</li>
<li>
<button type="submit" name="b1" value="file2" id="but3">
<p>file2</p>
</button>
</li>
<li>
<button type="submit" name="b1" value="filename länger als normal" id="but4">
<p>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="background: lightgreen; border: 0px; padding: 0px; overflow: auto; height: 100%; width: 100%; white-space: nowrap;">
Das ist ein ziemliche lange Zeile mit viel viel viel viel viel viel viel viel viel viel viel viel Text.
<br>mehr Zeilen
<br>mehr Zeilen
<br>mehr Zeilen
<br>mehr Zeilen
<br>mehr Zeilen
<br>mehr Zeilen
<br>mehr Zeilen
<br>mehr Zeilen
<br>mehr Zeilen
<br>mehr Zeilen
<br>mehr Zeilen
<br>mehr Zeilen
<br>mehr Zeilen
<br>mehr Zeilen
<br>mehr Zeilen
<br>mehr Zeilen
<br>mehr Zeilen
<br>mehr Zeilen
<br>mehr Zeilen
<br>mehr Zeilen
<br>mehr Zeilen
<br>mehr Zeilen
<br>mehr Zeilen
<br>mehr Zeilen
</div>
</div>
<div class="right-container right3"> right3 </div>
</div>
</aside>
</div>
</div>
</div>
</form>
</body>
</html>
Randfrage: Wie bekomme ich den Text im oben genannten Container 5px von allen Rändern weg...das klappte leider jetzt auch nicht mehr!