Ich habe das Problem, dass wenn right2 scrollbar wird, verschiebt sich alles.
Ziel ist, dass right2 immer komplett weiß ausgefüllt ist und wenn notig scrollbar wird, ohne das sich irgendetwas schiebt. Der Text in right2 darf nicht brechen - weshalb der Container scrollbar werden soll, wenn der Text den Rand des Bildschirms erreicht.
Und das alles ohne JavaScript! Gibt es dafür eine Lösung?
HTML
<!DOCTYPE HTML>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
font-family: monospace;
font-size: 14px;
}
body {
background: lightgreen;
}
.flex-container {
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
flex-direction: column;
width: 100vw;
height: 100vh;
}
.navigation {
flex-basis: auto;
}
.flex-container-navigation {
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
flex-direction: row;
border-bottom: 2px solid black;
align-items: center;
justify-content: center;
padding: 2px 5px 2px 5px;
}
.headline {
flex-basis: auto;
}
.maincontent {
display: flex;
padding: 5px;
height: 100vh;
}
.left-container {
display: flex;
flex-direction: column;
flex-basis: auto;
}
.left1 {
padding: 0px 0px 5px 0px;
min-width: 220px;
}
.left1 ul>button{
cursor:pointer;
border:none;
background: none;
text-align:left;
}
.dropdown ul {
display:flex;
flex-direction:column;
margin-top: -1000%;
}
.dropdown > input[type='checkbox'] {
position: absolute;
left: -100vw;
}
.dropdown > label{
display:block;
padding: 5px;
border: 1px solid black;
background: white;
cursor:pointer;
}
.dropdown > label:after {
content: "|";
float: right;
}
.dropdown:hover ul{
margin-top: 0%;
padding: 5px;
border: 1px solid black;
background: white;
}
.left2 {
flex: 1;
overflow: auto;
border: 1px solid black;
background: white;
padding-top: 5px;
margin-top: 5px;
}
.left2> ul{
height: auto;
display: flex;
flex-direction: column;
padding: 0px 5px 5px 5px;
}
.left2>ul button{
cursor:pointer;
border:none;
background: none;
text-align:left;
}
.left3 {
border: 1px solid black;
margin-top: 5px;
padding: 5px 5px 0px 5px;
}
.right-container {
display: flex;
flex-direction: column;
flex: 1;
padding-left: 5px;
}
.right1 {
border: 1px solid black;
padding: 5px;
}
.right2 {
flex: 1;
border: 1px solid black;
margin-top: 5px;
padding: 5px;
overflow-x: scroll;
overflow-y: scroll;
white-space: nowrap;
}
.right3 {
border: 1px solid black;
margin-top: 5px;
padding: 5px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="navigation">
<div class="flex-container-navigation">
<div class="headline">
HEADLINE
</div>
</div>
</div>
<div class="maincontent">
<aside class="left-container">
<div class="left1">
<div class="dropdown">
<input type="checkbox" id="my-dropdown" value="" name="my-checkbox">
<label for="my-dropdown" data-toggle="dropdown"> ordner1 </label>
<ul>
<button type="submit" name="b1" value="b1">ordner1</button>
<button type="submit" name="b2" value="b2">ordner2</button>
</ul>
</div>
</div><div class="left2">
<ul>
<button type="submit" name="f11" value="f1">file1</button>
<button type="submit" name="f22" value="f2">file2</button>
</ul>
</div><div class="left3">
left3
</div>
</aside>
<aside class="right-container">
<div class="right1"> file1 </div>
<div class="right2">
<div style="background: white; border: 0px; margin: -5px; padding: 5px; height: 100%; width: 100%; display: inline-block;">
Hier ist eine lange lange lange lange lange lange lange lange lange lange lange lange lange lange lange lange lange lange lange lange lange lange lange lange lange lange lange lange lange lange lange lange lange lange lange lange lange lange lange lange lange lange lange lange lange lange lange lange lange lange Zeile</div>
</div>
<div class="right3">
right3
</div>
</aside>
</div>
</div>
</body>
</html>
.