高度为 100% 的 CSS 网格子元素溢出父元素

Question

在网格父级的子级上添加高度 100% 会溢出父级。

我试过溢出：自动；在父级上，但这只是隐藏了按钮。

在此处查看我的示例：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>

我希望按钮不会溢出父元素。

Answer 1

不要使用height: 100%。 100% 与父级无关，因为您尚未在父级上定义高度。所以问问自己：“100% 是什么？”。如果没有具体的指导（即父级的明确高度），浏览器的行为是不可靠的，并且可能会有所不同。

避免百分比高度的额外复杂性，并一直使用 flex 属性。

.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>