Why does my CSS Grid container grow in height even with `height: 500px` set?

Question

I’m using CSS Grid with grid-auto-flow: column and grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)).

I’ve explicitly set a fixed height on the container (height: 500px), but when one of the grid items contains long content (like a paragraph), the container appears to grow vertically.

.container {
  height: 500px;
  width: 500px;
  margin: 200px auto;
  background-color: black;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.2);
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.box {
  color: white;
  font-size: 1.5rem;
  text-align: center;
}

body {
  background-color: bisque;
}

  <body>
<div class="container">
  <div class="box" style="background-color: #e53935">FIRST</div>
  <div class="box" style="background-color: #d81b60">SECOND</div>
  <div class="box" style="background-color: #8e24aa">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse ipsa hic nemo veniam voluptate tempore quod et numquam adipisci asperiores cumque optio, incidunt enim odit saepe deleniti accusamus eveniet labore.
  Veniam voluptatibus a laborum nam odit ratione necessitatibus doloribus perferendis hic incidunt? Nulla quam repellendus eveniet necessitatibus, eum, odio vel officiis atque illum perspiciatis id? Totam, perspiciatis voluptatibus? Ducimus, placeat.
  Tenetur, aliquid? Asperiores eligendi alias assumenda, quo dolor porro vero molestias commodi temporibus quis libero deserunt numquam magnam fuga? Quisquam numquam obcaecati officiis expedita nulla reiciendis quia porro maxime sapiente!
  Aliquid voluptatem modi animi omnis culpa similique veniam quas ipsa, sequi porro ea ut maiores quo error repellendus nobis rerum perspiciatis dolorem adipisci totam libero. Modi minus cum ad repudiandae.</div>
  <div class="box" style="background-color: #5e35b1">FOURTH</div>
  <div class="box" style="background-color: #3949ab">FIFTH</div>
  <div class="box" style="background-color: #1e88e5">SIXTH</div>
  <div class="box" style="background-color: #00acc1">SEVENTH</div>
  <div class="box" style="background-color: #00897b">EIGHTH</div>
</div>
  </body>

Questions:

Why does the height appear to grow beyond the 500px I set?

Note:

The one in question is an example which I am using to understand the Grid behavior upon using grid-auto-flow: column with grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)). I am new to CSS Grid and learning main concepts.

What happens if you set max-height?

ControlAltDel
– ControlAltDel

2025-05-16 16:59:10 +00:00
Commented May 16 at 16:59 — ControlAltDel
– ControlAltDel, Commented May 16 at 16:59
your element is not growing, it's overflowing

Temani Afif
– Temani Afif

2025-05-16 19:03:44 +00:00
Commented May 16 at 19:03 — Temani Afif
– Temani Afif, Commented May 16 at 19:03

Hamid · Accepted Answer · 2025-05-16 17:08:10Z

1

The element which you bound to a specific height or width, is always of that height & width, even in your given example if you see in inspect mode then you'll find the height & width to be 500px, But the issue which you are facing is happening because of the overflow behavior of the element, the overflow behavior of an element can be defined through the overflow attribute of css, by default It's set to visible, meaning even if any children/content overflows out of your container It'll still be visible as like your facing, to fix it you can set the overflow attribute of the container to hidden or scroll (It'll make the container scrollable), It'll make sure that any content, that gets out of container is not shown, For more information about overflow attribute you might visit this

edited May 16 at 17:08

answered May 16 at 17:02

Hamid

73 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why does my CSS Grid container grow in height even with `height: 500px` set?

Questions:

Note:

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Questions:

Note:

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related