CSS grid child with height 100% overflows parent

Question

Adding height 100% on a child of a grid parent overflows the parent.

I've tried overflow: auto; on the parent but that just hides the button.

See my example here: https://codepen.io/JordanDDisch/pen/GRKyWWG?editors=1100

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
}

.grid__inner-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

<div class="grid">

<div class="grid__item">
    Stuff 1

    <div class="grid__inner-content">
      <ul class="page-marketing__list">
        <li>Website template design, 1 of 7 templates without a blog</li>
        <li>Hosting 12 months</li>
        <li>12 pages w/form and video</li>
        <li>One monthly email to your list</li>
        <li>1 post a week to Facebook/Instagram pages</li>
      </ul>
      <button>asdf</button>
    </div>
  </div>
  <div class="grid__item">
    Stuff 2

    <div class="grid__inner-content">
      <ul class="page-marketing__list">
        <li>Website template design, 1 of 7 templates without a blog</li>
        <li>Hosting 12 months</li>
        <li>12 pages w/form and video</li>
        <li>One monthly email to your list</li>
        <li>1 post a week to Facebook/Instagram pages</li>
        <li>One content update per month to website and security updates</li>
        <li>$150 a month in Google ad spending</li>
        <li>Get $100 in free advertising when you enroll</li>
        <li>1 monthly written blog for your website</li>
        <li>Ongoing SEO optimizations</li>
      </ul>
      <button>asdf</button>
    </div>
  </div>
</div>

<div style="background: green; padding: 2rem;">Stuff</div>

I expected the button not overflow the parent element.

Answer 1

Don't use height: 100%. The 100% isn't relative to the parent, because you haven't defined a height on the parent. So ask yourself: "100% of what?". Without specific guidance (i.e., an explicit height on the parent), browser behavior is unreliable and may vary.

Just avoid the extra complication of percentage heights and use flex properties all the way through.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
}

/* enables flex properties on the child */
.grid__item {
  display: flex;
  flex-direction: column;
}

.grid__inner-content {
  flex: 1; /* consumes all free space (taking full height) */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* height: 100%; */
}

<div class="grid">
  <div class="grid__item">
    Stuff 1
    <div class="grid__inner-content">
      <ul class="page-marketing__list">
        <li>Website template design, 1 of 7 templates without a blog</li>
        <li>Hosting 12 months</li>
        <li>12 pages w/form and video</li>
        <li>One monthly email to your list</li>
        <li>1 post a week to Facebook/Instagram pages</li>
      </ul>
      <button>asdf</button>
    </div>
  </div>
  <div class="grid__item">
    Stuff 2

    <div class="grid__inner-content">
      <ul class="page-marketing__list">
        <li>Website template design, 1 of 7 templates without a blog</li>
        <li>Hosting 12 months</li>
        <li>12 pages w/form and video</li>
        <li>One monthly email to your list</li>
        <li>1 post a week to Facebook/Instagram pages</li>
        <li>One content update per month to website and security updates</li>
        <li>$150 a month in Google ad spending</li>
        <li>Get $100 in free advertising when you enroll</li>
        <li>1 monthly written blog for your website</li>
        <li>Ongoing SEO optimizations</li>
      </ul>
      <button>asdf</button>
    </div>
  </div>
</div>

<div style="background: green; padding: 2rem;">Stuff</div>