CSS child in grid forcing parent to overflow

Question

I am working with a CSS code and I have ran into some trouble.

The
should be 100% of the height left remaining inside of the
and the "module" should be scrollable if necessary. However, right now, the module is forcing it's parent to expand instead of having a scrollbar. Why is this? Here is a picture for reference for the desired end result.
I want the entire page to be scrollable so the user can scroll down to see the
but right now the page is almost stuck at being 100vh, no scroll allowed. Why is this?

I have tried adding max-height, overflow: auto and position: relative to both the child and parent classes without any success.

I am feeling pretty frustrated with CSS so would love some help. Any explanations and solutions so I can learn would be greatly appreciated.

  nav {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 65px;
    padding: 0px 20px;
    box-sizing: border-box;
    font-size: 20px;
    color: #5F6368;
    background-color: white;
    border-bottom: 1px solid lightgray}

  /* ----------[GENERAL]---------- */

  body {background-color: #FDFDFD;}

  #content {
    display: grid;
    position: fixed;
    top: 65px; left: 0;
    width: 100vw;
    height: calc(100vh - 60px);
    padding: 0px 32px;
    box-sizing: border-box;
    grid-template-columns: 1.5fr 1fr;
    grid-template-rows: 110px 1fr 90px;
    grid-template-areas:
      "hello hello"
      "announce feed"
      "spotlight spotlight";}

/* This formats the margin & placement of the boxes */
#content .area {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px;}

#content area .heading {
  font-size: 15px;
  font-weight: 800;
  color: #484848}

/* This formats the module boxes */
#content .module {
  position: relative;
  overflow: auto;
  background-color: white;
  border-radius: 6px;
  border: 1px solid lightgray;
  box-shadow: 1px 2px #CECECE;
  margin-top: 10px;
  height: 100%}

/* ----------[HELLO HEADER]---------- */
.hello {
  grid-area: hello;
  display: flex;
  align-items: center;
  padding: 20px;}

.hello .title {
  text-align: center;
  flex: 1;
  font-size: 2.2em;
  font-weight: 600;
  color: #484848}

/* Handles button spacing & size */
.hello .topbtn {
  background-color: white;
  border-radius: 6px;
  box-sizing: border-box;
  border: 1px solid lightgray;
  box-shadow: 1px 1.2px #CECECE;
  height: 50px;
  padding: 10px 25px;
  margin-left: 30px;}
  .topbtn:hover {
    cursor: pointer;
    transform: scale(1.03);
    background-color: #D4BBF1}

/* ----------[ANNOUNCEMENTS]---------- */
  .announce {grid-area: announce;}

  .announce .board {
    overflow: auto;
    display: flex;
    flex-direction: column;}

  /* Each message formatting */
  .announce .board section {
    padding: 14px;
    border-bottom: 1px solid lightgray}

  .announce .board .msg {font-size: 14.5px}

  /* Bottom part of message formatting */
  .announce section .details {
    display: flex;
    align-items: center; 
    margin-top: 4px;
    font-size: 13px}

  .announce section .details img {
    width: 25px;
    clip-path: circle();
    margin-right: 10px}

  .announce section .details .date {
    flex: 1;
    color: gray;
    text-align: right}


/* ----------[GRADE FEED]---------- */
.feed {grid-area: feed;}

/* -- Makes list scrollable -- */
.feed .list {overflow: auto}

/* -- Resets default values -- */
.feed .list ul {
  margin: 0;
  padding: 0;
  list-style: none;}

/* -- Styling for each list item -- */
.feed .list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14.5px;
  padding: 14px 10px;
  border-bottom: 1px solid lightgray;}

/* Stylize grades */
.A-font {font-weight: 800; color: #5B7042}
.B-font {font-weight: 800; color: #88A465}
.C-font {font-weight: 800; color: #D17010}
.D-font {font-weight: 800; color: #d5ab09}
.F-font {font-weight: 800; color: #AD1A2A}



/* ----------[SPOTLIGHT]---------- */
.spotlight {grid-area: spotlight;}


  
  
  
  
  



  
  
    Hi, Student.
    📷 check in
    ✉️ 3 new messages
    🚩 1 overdue task
  
  
  
    Announcements
    
         
           Please do not leave comments on Google Classroom - I more than likely will not see it. If you need me, use Clever or the "Ask for Help" button on ClassColonies to ask me questions.
           
             
             Mr. Teacher
             1w ago
           
         
         
           You do not need to write on the assignment today. I printed this off for you last week. If you lost your paper, write your answers on a separate piece of paper to bring to class on Tuesday.
           
             
             Mr. Teacher
             1w ago
           
         
    
  
  
  
    Recent Grades
    
      
        
          ✏️ Thoughts, Actions, Words
          Social Studies
          8/10
        
        
          💻 Flocab: Text Structure
          Reading
          7/10
        
        
          💻 Main Idea Bag Scoot
          Social Studies
          2/5
        
        
          ✏️ Thoughts, Actions, Words
          Reading
          8/10
        
        
          💻 Flocab: Text Structure
          Reading
          7/10
        
        
          💻 Main Idea Bag Scoot
          Reading
          2/5
        
        
          ✏️ Thoughts, Actions, Words
          Social Studies
          8/10
        
        
          💻 Flocab: Text Structure
          Reading
          7/10
        
        
          💻 Main Idea Bag Scoot
          Social Studies
          2/5
        
        
          ✏️ Thoughts, Actions, Words
          Reading
          8/10
        
        
          💻 Flocab: Text Structure
          Reading
          7/10
        
        
          💻 Main Idea Bag Scoot
          Reading
          2/5
        
      
    
  
  
  
    Recent Shoutouts

Kameron · Accepted Answer

I'm not entirely sure if I'm reading the problem correctly. However, the elements seem as if they are fixed at 100vh because of your height: calc(100%-65px); on your body. Once you remove that, your page should scroll as expected. I added more li's under module overdue for demonstration purposes.

EDIT -- wrong code posted. New code - you're using position: fixed; on your content id fixed does not allow for any scrolling especially on the main parent. Use marign-top on hello and area to move elements down. Added dummy image to demonstrate scroll.

Also, may I suggest z-index: -1; on area so content elements tucked behind menu on scroll?

nav {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 65px;
    padding: 0px 20px;
    box-sizing: border-box;
    font-size: 20px;
    color: #5F6368;
    background-color: white;
    border-bottom: 1px solid lightgray}

  /* ----------[GENERAL]---------- */

  body {background-color: #FDFDFD;}

  #content {
    display: grid;
    top: 65px; left: 0;
    width: 100vw;
    height: calc(100vh - 60px);
    padding: 0px 32px;
    box-sizing: border-box;
    grid-template-columns: 1.5fr 1fr;
    grid-template-rows: 110px 1fr 90px;
    grid-template-areas:
      "hello hello"
      "announce feed"
      "spotlight spotlight";}

/* This formats the margin & placement of the boxes */
#content .area {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px;
  margin-top: 3rem;
  z-index: -1;
  height: 46%;
}

#content area .heading {
  font-size: 15px;
  font-weight: 800;
  color: #484848}

/* This formats the module boxes */
#content .module {
  position: relative;
  overflow: auto;
  background-color: white;
  border-radius: 6px;
  border: 1px solid lightgray;
  box-shadow: 1px 2px #CECECE;
  margin-top: 10px;
  height: 100%}

/* ----------[HELLO HEADER]---------- */
.hello {
  grid-area: hello;
  display: flex;
  align-items: center;
  padding: 20px;
  margin-top: 5rem;
}

.hello .title {
  text-align: center;
  flex: 1;
  font-size: 2.2em;
  font-weight: 600;
  color: #484848}

/* Handles button spacing & size */
.hello .topbtn {
  background-color: white;
  border-radius: 6px;
  box-sizing: border-box;
  border: 1px solid lightgray;
  box-shadow: 1px 1.2px #CECECE;
  height: 50px;
  padding: 10px 25px;
  margin-left: 30px;}
  .topbtn:hover {
    cursor: pointer;
    transform: scale(1.03);
    background-color: #D4BBF1}

/* ----------[ANNOUNCEMENTS]---------- */
  .announce {grid-area: announce;}

  .announce .board {
    overflow: auto;
    display: flex;
    flex-direction: column;}

  /* Each message formatting */
  .announce .board section {
    padding: 14px;
    border-bottom: 1px solid lightgray}

  .announce .board .msg {font-size: 14.5px}

  /* Bottom part of message formatting */
  .announce section .details {
    display: flex;
    align-items: center; 
    margin-top: 4px;
    font-size: 13px}

  .announce section .details img {
    width: 25px;
    clip-path: circle();
    margin-right: 10px}

  .announce section .details .date {
    flex: 1;
    color: gray;
    text-align: right}


/* ----------[GRADE FEED]---------- */
.feed {grid-area: feed;}

/* -- Makes list scrollable -- */
.feed .list {overflow: auto}

/* -- Resets default values -- */
.feed .list ul {
  margin: 0;
  padding: 0;
  list-style: none;}

/* -- Styling for each list item -- */
.feed .list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14.5px;
  padding: 14px 10px;
  border-bottom: 1px solid lightgray;}

/* Stylize grades */
.A-font {font-weight: 800; color: #5B7042}
.B-font {font-weight: 800; color: #88A465}
.C-font {font-weight: 800; color: #D17010}
.D-font {font-weight: 800; color: #d5ab09}
.F-font {font-weight: 800; color: #AD1A2A}



/* ----------[SPOTLIGHT]---------- */
.spotlight {grid-area: spotlight;}

.spotlight {
  position: relative;
  top: -23rem;
}


  
  
  
  
  



  
  
    Hi, Student.
    📷 check in
    ✉️ 3 new messages
    🚩 1 overdue task
  
  
  
    Announcements
    
         
           Please do not leave comments on Google Classroom - I more than likely will not see it. If you need me, use Clever or the "Ask for Help" button on ClassColonies to ask me questions.
           
             
             Mr. Teacher
             1w ago
           
         
         
           You do not need to write on the assignment today. I printed this off for you last week. If you lost your paper, write your answers on a separate piece of paper to bring to class on Tuesday.
           
             
             Mr. Teacher
             1w ago
           
         
    
  
  
  
    Recent Grades
    
      
        
          ✏️ Thoughts, Actions, Words
          Social Studies
          8/10
        
        
          💻 Flocab: Text Structure
          Reading
          7/10
        
        
          💻 Main Idea Bag Scoot
          Social Studies
          2/5
        
        
          ✏️ Thoughts, Actions, Words
          Reading
          8/10
        
        
          💻 Flocab: Text Structure
          Reading
          7/10
        
        
          💻 Main Idea Bag Scoot
          Reading
          2/5
        
        
          ✏️ Thoughts, Actions, Words
          Social Studies
          8/10
        
        
          💻 Flocab: Text Structure
          Reading
          7/10
        
        
          💻 Main Idea Bag Scoot
          Social Studies
          2/5
        
        
          ✏️ Thoughts, Actions, Words
          Reading
          8/10
        
        
          💻 Flocab: Text Structure
          Reading
          7/10
        
        
          💻 Main Idea Bag Scoot
          Reading
          2/5
        
      
    
  
  
  
    Recent Shoutouts

CSS child in grid forcing parent to overflow

Answers (1)

Related Questions