FLEX Overflow Test

by mgoetzke

HTML

<div class="MAIN">
  <div class="SIDEBAR">
      SIDEBAR
  
  </div>
  <div class="CONTENT">
    <div class="LIST">
       <div class="VERY-LARGE-ITEM">
       
       </div>
    </div>
    <div class="CONTENT-SIDEBAR">
      CONTENT-SIDEBAR
    </div>
  </div>
</div>
<div class="FOOTER">  
FOOTER
</div>

CSS

html,body {
   width:100%;
   height:100%;
   display:flex;
   flex-direction:column;
   margin:0;
   padding:0;
}

.MAIN {
  flex:1;
  display:flex;
  background:lightblue;
}

.SIDEBAR {
   background:green;
}

.CONTENT {
  background:lightgreen;
  flex:1;
  display:flex;
}

.CONTENT-SIDEBAR {
  background:darkgreen;
}

.LIST {
  flex:1;
}

/* OVERFLOW TEST */

.LIST {
  overflow:auto;
  position:relative;   
  padding: 50px;
}

.VERY-LARGE-ITEM {
  /* display:none; */ /* remove to overflow */
  background: red;
  height: 2000px;
  width: 100%;
}