CSS child in grid forcing parent to overflow

Question

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

The <div class='module'> should be 100% of the height left remaining inside of the <div class='area'> 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 <div class='area spotlight'> 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;}

<head>
  <link rel="stylesheet" href="https://classcolonies.com/resources/style.css">
  <link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.min.js"></script>
  <nav></nav>
</head>

<div id="content">
  
  <div class='hello'>
    <div class='title'>Hi, Student.</div>
    <div class='topbtn overdue'>📷 check in</div>
    <div class='topbtn mail'>✉️ 3 new messages</div>
    <div class='topbtn overdue'>🚩 1 overdue task</div>
  </div>
  
  <div class='area announce'>
    <div class='heading'>Announcements</div>
    <div class='module board'>
         <section>
           <div class='msg'>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.</div>
           <div class='details'>
             <img src='https://classcolonies.com/resources/pics/teachers/1.jpg'>
             <span class='name'>Mr. Teacher</span>
             <span class='date'>1w ago</span>
           </div>
         </section>
         <section>
           <div class='msg'>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.</div>
           <div class='details'>
             <img src='https://classcolonies.com/resources/pics/teachers/1.jpg'>
             <span class='name'>Mr. Teacher</span>
             <span class='date'>1w ago</span>
           </div>
         </section>
    </div>
  </div>
  
  <div class='area feed'>
    <div class='heading'>Recent Grades</div>
    <div class='module list'>
      <ul>
        <li>
          <span class='title'>✏️ Thoughts, Actions, Words</span>
          <span class='subject'>Social Studies</span>
          <span class='score B-font'>8/10</span>
        </li>
        <li>
          <span class='title'>💻 Flocab: Text Structure</span>
          <span class='subject'>Reading</span>
          <span class='score C-font'>7/10</span>
        </li>
        <li>
          <span class='title'>💻 Main Idea Bag Scoot</span>
          <span class='subject'>Social Studies</span>
          <span class='score F-font'>2/5</span>
        </li>
        <li>
          <span class='title'>✏️ Thoughts, Actions, Words</span>
          <span class='subject'>Reading</span>
          <span class='score B-font'>8/10</span>
        </li>
        <li>
          <span class='title'>💻 Flocab: Text Structure</span>
          <span class='subject'>Reading</span>
          <span class='score C-font'>7/10</span>
        </li>
        <li>
          <span class='title'>💻 Main Idea Bag Scoot</span>
          <span class='subject'>Reading</span>
          <span class='score F-font'>2/5</span>
        </li>
        <li>
          <span class='title'>✏️ Thoughts, Actions, Words</span>
          <span class='subject'>Social Studies</span>
          <span class='score B-font'>8/10</span>
        </li>
        <li>
          <span class='title'>💻 Flocab: Text Structure</span>
          <span class='subject'>Reading</span>
          <span class='score C-font'>7/10</span>
        </li>
        <li>
          <span class='title'>💻 Main Idea Bag Scoot</span>
          <span class='subject'>Social Studies</span>
          <span class='score F-font'>2/5</span>
        </li>
        <li>
          <span class='title'>✏️ Thoughts, Actions, Words</span>
          <span class='subject'>Reading</span>
          <span class='score B-font'>8/10</span>
        </li>
        <li>
          <span class='title'>💻 Flocab: Text Structure</span>
          <span class='subject'>Reading</span>
          <span class='score C-font'>7/10</span>
        </li>
        <li>
          <span class='title'>💻 Main Idea Bag Scoot</span>
          <span class='subject'>Reading</span>
          <span class='score F-font'>2/5</span>
        </li>
      </ul>
    </div>
  </div>
  
  <div class='area spotlight'>
    <div class='heading'>Recent Shoutouts</div>
  </div>
  
</div>

Kameron · Accepted Answer · 2021-12-28 02:37:57Z

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;
}

<head>
  <link rel="stylesheet" href="https://classcolonies.com/resources/style.css">
  <link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.min.js"></script>
  <nav></nav>
</head>

<div id="content">
  
  <div class='hello'>
    <div class='title'>Hi, Student.</div>
    <div class='topbtn overdue'>📷 check in</div>
    <div class='topbtn mail'>✉️ 3 new messages</div>
    <div class='topbtn overdue'>🚩 1 overdue task</div>
  </div>
  
  <div class='area announce'>
    <div class='heading'>Announcements</div>
    <div class='module board'>
         <section>
           <div class='msg'>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.</div>
           <div class='details'>
             <img src='https://classcolonies.com/resources/pics/teachers/1.jpg'>
             <span class='name'>Mr. Teacher</span>
             <span class='date'>1w ago</span>
           </div>
         </section>
         <section>
           <div class='msg'>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.</div>
           <div class='details'>
             <img src='https://classcolonies.com/resources/pics/teachers/1.jpg'>
             <span class='name'>Mr. Teacher</span>
             <span class='date'>1w ago</span>
           </div>
         </section>
    </div>
  </div>
  
  <div class='area feed'>
    <div class='heading'>Recent Grades</div>
    <div class='module list'>
      <ul>
        <li>
          <span class='title'>✏️ Thoughts, Actions, Words</span>
          <span class='subject'>Social Studies</span>
          <span class='score B-font'>8/10</span>
        </li>
        <li>
          <span class='title'>💻 Flocab: Text Structure</span>
          <span class='subject'>Reading</span>
          <span class='score C-font'>7/10</span>
        </li>
        <li>
          <span class='title'>💻 Main Idea Bag Scoot</span>
          <span class='subject'>Social Studies</span>
          <span class='score F-font'>2/5</span>
        </li>
        <li>
          <span class='title'>✏️ Thoughts, Actions, Words</span>
          <span class='subject'>Reading</span>
          <span class='score B-font'>8/10</span>
        </li>
        <li>
          <span class='title'>💻 Flocab: Text Structure</span>
          <span class='subject'>Reading</span>
          <span class='score C-font'>7/10</span>
        </li>
        <li>
          <span class='title'>💻 Main Idea Bag Scoot</span>
          <span class='subject'>Reading</span>
          <span class='score F-font'>2/5</span>
        </li>
        <li>
          <span class='title'>✏️ Thoughts, Actions, Words</span>
          <span class='subject'>Social Studies</span>
          <span class='score B-font'>8/10</span>
        </li>
        <li>
          <span class='title'>💻 Flocab: Text Structure</span>
          <span class='subject'>Reading</span>
          <span class='score C-font'>7/10</span>
        </li>
        <li>
          <span class='title'>💻 Main Idea Bag Scoot</span>
          <span class='subject'>Social Studies</span>
          <span class='score F-font'>2/5</span>
        </li>
        <li>
          <span class='title'>✏️ Thoughts, Actions, Words</span>
          <span class='subject'>Reading</span>
          <span class='score B-font'>8/10</span>
        </li>
        <li>
          <span class='title'>💻 Flocab: Text Structure</span>
          <span class='subject'>Reading</span>
          <span class='score C-font'>7/10</span>
        </li>
        <li>
          <span class='title'>💻 Main Idea Bag Scoot</span>
          <span class='subject'>Reading</span>
          <span class='score F-font'>2/5</span>
        </li>
      </ul>
    </div>
  </div>
  
  <div class='area spotlight'>
    <div class='heading'>Recent Shoutouts</div>
    <img src="https://dummyimage.com/600x400/000/fff&text=I+scrolled!!">
  </div>
  
</div>

My apologizes - I copied the wrong script.. this is what looking at code for 3 hours will do for you, haha! Updated OG post.
@Mathew Updated! I was confused on screenshot mainly... explains it.
Thank you for the tip! This fixes the second problem, but doesn't help resolve the main first problem. The final result should look something like this image but instead the "recent grades" section is extremely long. How do I fix this?

Collectives™ on Stack Overflow

CSS child in grid forcing parent to overflow

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related