htmlcsscss-grid

Why doesn't the third grid row expand to fit its overflowing content when using `minmax(100px, 1fr)` in CSS Grid?

I'm using CSS Grid to lay out a fixed-height container with 8 rows. Each row is defined using:

grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));

The container has a fixed height of 600px, and there are 8 .box items inside it. One of these items (the third one) contains a very large block of text, which clearly overflows its grid cell.

.container {
  height: 600px;
  width: 500px;
  display: grid;
  grid-auto-flow: row;
  grid-template-rows: repeat(auto-fit, minmax(100px, 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. Minus sed
    tempore saepe in voluptatem asperiores velit animi iure mollitia itaque
    atque distinctio blanditiis accusamus officiis, dolor iusto quis. Nemo,
    optio! Nemo quos provident, odit hic maiores obcaecati ut debitis
    placeat, sapiente tenetur perspiciatis praesentium in! Vero quos
    inventore illum perferendis odio quo eligendi consequatur beatae, libero
    repellat eaque esse. Error. Vero deleniti repellendus enim itaque
    sapiente dolor, esse eos dolorum nisi laudantium incidunt eligendi
    asperiores delectus laboriosam obcaecati ut. Atque natus non alias quae
    nesciunt magnam veniam ad culpa necessitatibus. Ea tenetur assumenda
    aspernatur rem consectetur quo pariatur amet quibusdam? Perferendis
    nobis ea odio laborum atque vel consectetur. Illo odit inventore quis
    eum quaerat! Optio totam velit autem nulla et. Possimus facilis quos
    voluptates hic. Accusamus reprehenderit nihil aliquid? Nisi ducimus
    minima eveniet quos rerum dicta, illo obcaecati excepturi nesciunt,
    voluptatibus non modi facere saepe minus necessitatibus, cum autem
    blanditiis?
  </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>

Question:

I expected the third row to expand vertically to fit its overflowing content. But instead, it stays fixed at 100px and overflows visually.

I am trying to understand the underlying concept here why THIRD ROW NOT EXPANDING to fit the content?

Solution

  • The reason the third row not expanding is because the grid track size and grid item size are NOT the same thing. With repeat(auto-fit, minmax(100px, 1fr)), you devided the grid into 6 row tracks with 100px each. The thrid grid item has a larger size that cannot fit in the 100px grid track size, so it overflows. But it will NOT expand its grid track since it will modify the grid row definition.

    TL;DR, the grid track will not expand automatically if there are no free space left.

    FYI. If you're looking for a soltuion that make a container with at least 600px -

    Then you could try the following solution:

    .container {
  /* use min-height instead of height, so the track size can be expanded */
  min-height: 600px;
  width: 500px;
  display: grid;
  grid-auto-flow: row;
  /* with max(100px, auto), it takes at least 100px, but respect its minimum content size */
  grid-auto-rows: minmax(max(100px, auto), 1fr);
}

.box {
  color: white;
  font-size: 1.5rem;
  text-align: center;
  /* define minimum grid item size */
  min-height: 100px;
}

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. Minus sed
      tempore saepe in voluptatem asperiores velit animi iure mollitia itaque
      atque distinctio blanditiis accusamus officiis, dolor iusto quis. Nemo,
      optio! Nemo quos provident, odit hic maiores obcaecati ut debitis
      placeat, sapiente tenetur perspiciatis praesentium in! Vero quos
      inventore illum perferendis odio quo eligendi consequatur beatae, libero
      repellat eaque esse. Error. Vero deleniti repellendus enim itaque
      sapiente dolor, esse eos dolorum nisi laudantium incidunt eligendi
      asperiores delectus laboriosam obcaecati ut. Atque natus non alias quae
      nesciunt magnam veniam ad culpa necessitatibus. Ea tenetur assumenda
      aspernatur rem consectetur quo pariatur amet quibusdam? Perferendis
      nobis ea odio laborum atque vel consectetur. Illo odit inventore quis
      eum quaerat! Optio totam velit autem nulla et. Possimus facilis quos
      voluptates hic. Accusamus reprehenderit nihil aliquid? Nisi ducimus
      minima eveniet quos rerum dicta, illo obcaecati excepturi nesciunt,
      voluptatibus non modi facere saepe minus necessitatibus, cum autem
      blanditiis?
    </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>

    Extra

    To answer the follow up question in the comment. By default, implicitly created rows/columns will always use min-content as their sizes. Thus with grid-template-columns but no grid-template-rows or grid-auto-rows defined, the first rows is actually an implicit row, which uses the min-content(determined by the long paragragh) as its default height. That it took all the available height (600px) and even more than that to show all the content.

    Here's a way to make it work as what you think it should work. Also here's an existing answer that explains what min-height: 0 does in details.

    .container {
  height: 600px;
  width: 500px;
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  
  /* make sure all the rows take the space equally */
  grid-auto-rows: 1fr;
}

.box {
  color: white;
  font-size: 1.5rem;
  text-align: center;
  
  /* make sure the row size won't be affected by its content-size (which will cause it to overflow) */
  min-height: 0;
}

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. Minus sed
      tempore saepe in voluptatem asperiores velit animi iure mollitia itaque
      atque distinctio blanditiis accusamus officiis, dolor iusto quis. Nemo,
      optio! Nemo quos provident, odit hic maiores obcaecati ut debitis
      placeat, sapiente tenetur perspiciatis praesentium in! Vero quos
      inventore illum perferendis odio quo eligendi consequatur beatae, libero
      repellat eaque esse. Error. Vero deleniti repellendus enim itaque
      sapiente dolor, esse eos dolorum nisi laudantium incidunt eligendi
      asperiores delectus laboriosam obcaecati ut. Atque natus non alias quae
      nesciunt magnam veniam ad culpa necessitatibus. Ea tenetur assumenda
      aspernatur rem consectetur quo pariatur amet quibusdam? Perferendis
      nobis ea odio laborum atque vel consectetur. Illo odit inventore quis
      eum quaerat! Optio totam velit autem nulla et. Possimus facilis quos
      voluptates hic. Accusamus reprehenderit nihil aliquid? Nisi ducimus
      minima eveniet quos rerum dicta, illo obcaecati excepturi nesciunt,
      voluptatibus non modi facere saepe minus necessitatibus, cum autem
      blanditiis?
    </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>