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

Posted 2023-03-06

【中文标题】高度为 100% 的 CSS 网格子元素溢出父元素

【英文标题】：CSS grid child with height 100% overflows parent

【发布时间】：2020-01-08 19:01:46

【问题描述】：

在网格父级的子级上添加高度 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>

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

【参考方案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>

【讨论】：

子组件总是需要“he​​ight: 100%”

“避免百分比高度的额外复杂性，并一直使用 flex 属性。”如果网格中有一个网格怎么办？

@PeterMoore，发布一个包含相关详细信息的新问题。根据您的设置，有多种选择。