Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 31.12.2018, 16:22
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 Scrollbars übersteuern ihren eigenen Div-Container

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 !!!

Geändert von halloICKEbins2 (31.12.2018 um 16:26 Uhr)
Mit Zitat antworten
Sponsored Links