I have a web page that behaves similiarly to this simple example

.a {
  width: 100px;
  border: 2px solid blue;

  min-width: min-content;
  /* min-width: max-content; */

  display: grid;
  grid: 1fr / 1fr max-content;
}

.b {
  border: 2px solid purple;
}

.c {
  border: 2px solid green;
  /* grid-column: 1 / -1; */
}

.d {
  width: 200px;
  border: 2px solid red;
}

<div class="a">
  <div class="b">
    1
  </div>
  <div class="b">
    2
  </div>
  <div class="c">
    <div class="d">
      *content*
    </div>
  </div>
</div>

I have a web page that behaves similiarly to this simple example

.a {
  width: 100px;
  border: 2px solid blue;

  min-width: min-content;
  /* min-width: max-content; */

  display: grid;
  grid: 1fr / 1fr max-content;
}

.b {
  border: 2px solid purple;
}

.c {
  border: 2px solid green;
  /* grid-column: 1 / -1; */
}

.d {
  width: 200px;
  border: 2px solid red;
}

<div class="a">
  <div class="b">
    1
  </div>
  <div class="b">
    2
  </div>
  <div class="c">
    <div class="d">
      *content*
    </div>
  </div>
</div>

I want .c to span for the whole row, but if I uncomment the grid-column: 1 / -1; line, it overflows Unless I use max-content on .a instead of min-content, but that would introduce some text-sizing related issues in my real page

Why is there a difference between max-content and min-content in this case?

• html
• css
• css-grid

• 2 You want the explanation of the why or a simple fix? – Temani Afif Commented Mar 19 at 11:31
• I would like an explanation, because I've already found a lot of different fixes, but none of them gave me an intuitive way of thinking about this problem – AFatNiBBa Commented Mar 19 at 15:27
• What behavior do you expect?! "but that would introduce some text-sizing related issues in my real page" - what are you talking about? – imhvost Commented Mar 19 at 21:40
• I expected min-content and max-content to be different only when sizing according to things that wrap, it looks like that I was wrong, but I don't understand about what specifically – AFatNiBBa Commented Mar 20 at 15:08

1 Answer 1

The grid container .a has a fixed width of 100px. The .d child has a fixed width of 200px. Since .d is not a direct child of the grid (.a), the min-content ignores it, and it overflows, while max-content includes it, so it won't. If you'll set the width: 200px; on .c, the min-content would work as well:

.a {
  width: 100px;
  border: 2px solid blue;

  min-width: min-content;

  display: grid;
  grid: 1fr / 1fr max-content;
}

.b {
  border: 2px solid purple;
}

.c {
  width: 200px;
  border: 2px solid green;
  grid-column: 1 / -1;
}

.d {
  
  border: 2px solid red;
}

<div class="a">
  <div class="b">
    1
  </div>
  <div class="b">
    2
  </div>
  <div class="c">
    <div class="d">
      *content*
    </div>
  </div>
</div>

A simpler solution would be to set the width of .a to fit-content so it would contain all it's children.

.a {
  width: fit-content;
  border: 2px solid blue;

  display: grid;
  grid: 1fr / 1fr max-content;
}

.b {
  border: 2px solid purple;
}

.c {
  border: 2px solid green;
  grid-column: 1 / -1;
}

.d {
  width: 200px;
  border: 2px solid red;
}

<div class="a">
  <div class="b">
    1
  </div>
  <div class="b">
    2
  </div>
  <div class="c">
    <div class="d">
      *content*
    </div>
  </div>
</div>