Flex Dialog TEST MOVE PANEL Print Expands Height for Portrait

by greatCar

HTML

<div class="flex-container">
  <header class="header">Header</header>

 <aside class="aside aside1">
   
   <div class="flex-container">
  <header class="panelHeader">Panel Header</header>
  <aside class="panelAside panelAside1">Panel Option 1</aside>
  <aside class="panelAside panelAside2">Panel Option 2</aside>
  <footer class="panelAside3 panelAside">Panel Option 3</footer>
</div>
   
 </aside>

<article class="main">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed ex turpis. Cras luctus nibh lectus, in ullamcorper ex tempor eleifend. Nulla bibendum, eros a consequat vestibulum, orci massa fermentum quam, sed commodo nunc ex vitae nisl. commodo nunc ex vitae nisl. commodo nunc ex vitae nisl. commodo nunc ex vitae nisl. commodo nunc ex vitae nisl. commodo nunc ex vitae nisl. commodo nunc ex vitae nisl. commodo nunc ex vitae nisl. commodo nunc ex vitae nisl. commodo nunc ex vitae nisl. commodo nunc ex vitae nisl. commodo nunc ex vitae nisl. commodo nunc ex vitae nisl. commodo nunc ex vitae nisl. commodo nunc ex vitae nisl. commodo nunc ex vitae nisl. commodo nunc ex vitae nisl. commodo nunc ex vitae nisl. commodo nunc ex vitae nisl. commodo nunc ex vitae nisl. commodo nunc ex vitae nisl. commodo nunc ex vitae nisl. commodo nunc ex vitae nisl. commodo nunc ex vitae nisl. commodo nunc ex vitae nisl. commodo nunc ex vitae nisl. commodo nunc ex vitae nisl. commodo nunc ex vitae nisl. commodo nunc ex vitae nisl. commodo nunc ex vitae nisl. commodo nunc ex vitae nisl. commodo nunc ex vitae nisl. commodo nunc ex vitae nisl. commodo nunc ex vitae nisl. commodo nunc ex vitae nisl. commodo nunc ex vitae nisl. vAliquam ullamcorper interdum est nec tincidunt. Cras luctus nibh lectus, Cras luctus nibh lectus, Cras luctus nibh lectus, Cras luctus nibh lectus, Cras luctus nibh lectus, Cras Cras luctus nibh lectus, Cras luctus nibh lectus, Cras Cras luctus nibh lectus, Cras luctus nibh lectus, Cras Cras luctus nibh lectus, Cras luctus nibh lectus,...

CSS

.flex-container {
    display: -webkit-flex;
    display: flex;  
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    font-weight: bold;
    text-align: center;
    
}

.flex-container > * {
    padding: 0px;
    flex: 1 100%;
}

.main {
    text-align: left;
    background: cornflowerblue;
}

.header {background: coral; height:40px;}
.footer {background: lightgreen; height:40px;}
.aside1 {background: grey; }
.main    { flex: 3 0px; height: 320px; overflow-y:scroll;}

@media all and (min-width: 800px) {
    .aside { flex: 1 0px; }
    .main    { height: 320px;}
    .aside1 {height: 320px}
}

.panelHeader {background: lightblue;height: 40px;}
.panelAside3 {background: lightgreen;height: 40px;}
.panelAside1 {background: moccasin;height: 40px;}
.panelAside2 {background: violet; height: 40px;}
.panelAside {padding: 0px;}
@media all and (max-width: 799px) {
    .panelAside { flex: 1 0px; height: 40px;}
     .panelAside1 { order: 1; height: 40px;} 
    .panelAside2 { order: 2; height: 40px;}
    .panelAside3  { order: 3; height: 40px;}
.main  { height: 240px;}
}

   @media all and (min-height: 600px) and (max-width: 799px) {

.main    { height: 320px;}


}