Workaround for flex layout to behave

.vuepress/scss/_layout.scss

@@ -8,11 +8,9 @@ html {
 }
 
 body {
-  min-width: 320px; min-height: 100vh;
+  min-width: 320px;
 
   color: $black;
-  display: flex;
-  flex-direction: column;
   @include font-sans;
   font-size: 12px;
   overflow-x: hidden;
@@ -21,8 +19,14 @@ body {
 }
 
 main {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  padding-top: 4rem;
+
+  > div:first-of-type {
     flex: 1;
-  padding-top: 4rem !important; // override Vue
+  }
 }
 
 .inner-wrap {

.vuepress/theme/Layout.vue

@@ -1,7 +1,5 @@
 <template>
-
   <main>
-
     <nav class="navigation">
       <div class="inner-wrap">
         <router-link class="navigation__item" to="/" title="Go back home">LBRY</router-link>
@@ -14,6 +12,7 @@
     </nav>
 
     <template v-if="$page.frontmatter.home">
+      <div>
         <section class="home hero">
           <div>
             <h2>
@@ -101,6 +100,7 @@
             </ul>
           </div>
         </section>
+      </div>
     </template>
 
     <template v-else-if="$page.path == '/whitepaper.html'">
@@ -108,12 +108,14 @@
     </template>
 
     <template v-else>
+      <div>
         <section class="ancillary">
           <div class="inner-wrap">
             {{ $page.title }}
             <Content custom></Content>
           </div>
         </section>
+      </div>
     </template>
 
     <footer class="footer">