Meine Codepens ,My Codepens ,Flexbox etwas kompliziert

flexbox_etwas_kompliziert.php

Quell Code

<!DOCTYPE HTML>
<html lang="de">
  <head>
    <title>Test</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <style>
      * {
	margin: 0;
	padding: 0;
	font-family: monospace;
}

main{
  display:flex;							
	border: 1px solid red;
	padding: 5px;
  height:calc(100vh - 70px);/*Minus header*/
}
      
      
      
      
.flex-container-navigation {
	 display: flex;		
    flex-direction: row;
    align-content:space-around;
}
      #oben{
        height:20vh;
      }
      
           
      
      #mitte{
        display:flex;
        flex:1 auto;
      }
      #left{
 flex:1 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
      }
      #left>span{
        flex:1 0 auto;
        text-align:center;
      }
      #rechts{
            flex: 1 auto;
      }
.mitte{
          display:flex;
        flex: 1 0 auto;
        align-self: stretch;
  font-family: Coolvetica; 
  font-weight: bold; 
  flex:1;
  font-size:1rem;
}
#last{
  background:url('http://www.animatedimages.org/data/media/35/animated-eye-image-0024.gif');
        display:block;
    width:100%;
  height:100%;
border:none;
  background-position:center;
  background-repeat:no-repeat;
background-size:60% 180%;
  font-weight:bolder;
    text-align:center;
  font-size:3em;
color:rgba(255,0,0,0.3)
}
    
      
      
      



.left-container {
	display:flex;	
	flex-direction: column;			 
 	flex-basis: auto;		
}
.left1 {
	background:#aaa;
}
.dropdown span{
    display:flex;
    flex-direction:column;
    margin-top:-100%;
}
.left2{
  padding: 5px;
  flex: 1;
  overflow:auto;
  height:calc(100% - 12px);/*Minus padding und border*/
}
.left2> span{
  height:auto;
  display:flex;
  flex-direction:column;
}
.left2>span button,.left1 span>button{
  cursor:pointer;
  height:30px;
  border:none;
	background: none;
 text-align:left;
}

.left3 {
	 background: #AA00CC;
}
.right-container {
	display:flex;	
	flex-direction: column;					
  flex:1;	
}
.right1 {								
	background: #AAAA00;
	flex: 1;	
}
.right2 {						
	background: #AAAAEE;
	flex: 1;	
}
.right3 {					
	background: #AAAAFF;
	flex: 1;	
}
.dropdown > input[type="checkbox"] {
  position: absolute;
  left: -100vw;		
}
.dropdown > label{
   display:block;
   padding: 5px;
}
.dropdown > label:after {
   content: ">>>>";		
  float:right;
}
.dropdown:hover   span{
    margin-top:0%;
}
button:hover,span button:hover,#last:hover{
	background: lightblue;
}


  
      
      

@media (max-width:570px){
 .flex-container-navigation{
    background:red;
   flex-direction:column;
  }
  
 main{
   flex-direction:column;
}
  main>*{
    height:200px;
  }
}

      
.right-container div,.left-container div{
  border:1px solid black;
}

      
      
main .left3 label input {
  display: none; /* hide the default checkbox */
}

/* style the artificial checkbox */
main .left3 label span {
  height: 30px;
  width: 30px;
  border: 3px solid grey;
  display: inline-block;
  position: relative;
  background:red;
}

 
main .left3 [type=checkbox]:checked + span:before {
  content: '\2714';
  position: absolute;
  top: -2px;
  height:30px;
  width:26px;
  border:3px solid red;
  left: -3px;
  font-size:25px;
  font-weight:900;
line-height:1.32;
  padding-left:4px;
  background:green;
}
    </style>
</head>
<body>
<form target="_self" action="#" method="post">
<div id="oben" class="flex-container-navigation">
  
  <div id="left"><span>
    headline</span>
  </div>
  <div id="mitte" class="headline">
<button class="mitte" type="submit" name="headline">1</button>
 <button class="mitte" type="submit" name="headline">2</button>
   <button class="mitte" type="submit" name="headline">3</button>
 <button class="mitte" type="submit" name="headline">
					4</button>
<button class="mitte" type="submit" name="headline">
					5
				</button>
        				<button class="mitte" type="submit" name="headline">
					6
				</button>
        				<button class="mitte" type="submit" name="headline">
					7

        		</button>
</div>
      <div id="rechts">
<button id="last" type="submit" name="headline">
					letzter</button>   
      </div>
		</div>
  
  
  
 <main>
			<aside class="left-container">
				<div class="left1"> 
					<div class="dropdown">
					  <input type="checkbox" id="my-dropdown" name="my-checkbox">
					  <label for="my-dropdown" data-toggle="dropdown"> Alle anzeigen </label>
					  <span>
	<button type="submit" class="b1">
								file1
		</button>

	<button type="submit" class="b1">
								file2
		</button>
						
					
	<button type="submit" class="b1">
								längerals die anderen bla boa der der
		</button>
			
					  </span>
					</div>				
				</div>
				<div class="left2"> 
	<span>							<button type="submit" name="b2">text1</button>
								<button type="submit" name="b2">text2</button>
								<button type="submit" name="b2">text3</button>
		<button type="submit" name="b2">text4</button>
						 
              
   								<button type="submit" name="b2">text1</button>
								<button type="submit" name="b2">text2</button>
								<button type="submit" name="b2">text3</button>
								<button type="submit" name="b2">text4</button>
				          
              
      								<button type="submit" name="b2">text1</button>
								<button type="submit" name="b2">text2</button>
								<button type="submit" name="b2">text3</button>
								<button type="submit" name="b2">text4</button>
				        
              
      								<button type="submit" name="b2">text1</button>
								<button type="submit" name="b2">text2</button>
								<button type="submit" name="b2">text3</button>
														
 
						</span>
		 
				</div>
				<div class="left3"> left3
<label>
  <input type='checkbox'>
  <span></span>
  Checkbox label text
</label>
        </div>
			</aside>
   
   
			<aside class="right-container">
				<div class="right1"> right1</div>
				<div class="right2"> right2 </div>
				<div class="right3"> right3 </div>
			</aside>
  </main>
</form>
<script>
  
 $(document).ready(function(){
     t=$('#left>span').html()
   go(t);
$(window).resize(function(){
go(t)
});
   
   function go(t){
     var h=$('#mitte').height();
  var h1=h;
    $('#left').html('')
  if(h>30){
    h=h*2;
    normal=100+h;
  }else{
      h=h*2;
    normal=100+h/2;
  
  }
      $('#left,.mitte,#last').css('font-size',normal+'%')
$('#left').html(t+','+h1+','+normal+'%');
  
  
  

   }
   
   
 });
  </script>
</body>
</html>