Einzelnen Beitrag anzeigen
  #10 (permalink)  
Alt 11.01.2019, 15:09
halloICKEbins2 halloICKEbins2 ist offline
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.12.2018
Beiträge: 35
halloICKEbins2 befindet sich auf einem aufstrebenden Ast
Standard

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!
Mit Zitat antworten
Sponsored Links