Flex Dialog Print Expands Height for Portrait

by greatCar

HTML

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

 <aside class="aside aside1">Aside 1</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, 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, Cras Cras luctus nibh lectus, Cras luctus nibh lectus, Cras luctus nibh lectus, Cras luctus nibh lectus, Cras luctus nibh...

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: moccasin; height: 40px;}
.main    { flex: 3 0px; height: 280px; overflow-y:scroll;}

@media all and (min-width: 800px) {
    .aside { flex: 1 0px; }
    .main    { height: 320px;}
    .aside1 {height: 320px}
}
@media all and (min-height: 400px) and (max-width: 799px) {
    .main    { height: 420px;}
   .aside1 {height: 40px}
   .header {height: 40px}
   .footer {height: 40px}
}