Add scroll to each column in CSS Grid Layout

Question

I want separate scroll on each of my columns in my grid layout.

Currently, I am developing a mobile only web application. I want to use a different grid layout for t

Answer 1

Here is a extended version from my answer on your earlier question, how to get scroll for both header/content/main and nav using flexbox.

Fiddle demo

Stack snippet

(function(w, d, timeout) {
  w.addEventListener("load", function() {
    resizer();
  }, false);

  w.addEventListener("resize", function() {
    if (!timeout) {
      timeout = setTimeout(function() {
        timeout = null;
        // do resize stuff
        resizer();
      }, 66);
    }
  }, false);

  function resizer() {
    if (w.innerHeight < w.innerWidth) {
      if (!(d.body.classList.contains('landscape'))) {
        d.body.classList.add('landscape');
        d.body.appendChild(d.querySelector('nav'));
      }
    } else {
      if (d.body.classList.contains('landscape')) {
        d.body.classList.remove('landscape')
        d.querySelector('section').appendChild(d.querySelector('nav'));
      }
    }
  }
}(window, document));

html, body {
  margin:0;
}
header, footer, main, nav {
  margin: 5px;
  padding: 5px;
  border-radius: 5px;
  min-height: 120px;
  border: 1px solid #eebb55;
  background: #ffeebb;
}
footer {
  order: 2;
}
nav {
  order: 1;
}
section {
  display: flex;
  flex-direction: column;
}

@media only screen and (orientation: landscape) {

  main div {
    height: 400px;
    border: 1px dashed red;
  }
  nav div {
    height: 800px;
    border: 1px dashed red;
  }

  body.landscape {
    display: flex;
  }
  section {
    display: block;
    width: calc(60% - 10px);         /*  10px is for the margin  */
    box-sizing: border-box;
    max-height: calc(100vh - 20px);
    overflow: auto;
  }
  nav {
    width: calc(40% - 10px);         /*  10px is for the margin  */
    box-sizing: border-box;
    max-height: calc(100vh - 20px);
    overflow: auto;
  }
}

  
header
  
content
    

      This div get a height when in landscape to show scroll in section
    
  
  
footer
  
navigation
    

      This div get a height when in landscape to show scroll in nav