为什么``width''：min-content`与此``显示：grid'spanned celm''一起工作？ 我有一个与这个简单示例相似的网页 .a { 宽度：100px; 边界：2px纯蓝色； 最小宽度：最小的； /*最小宽度：max-content; */ 显示：网格； gr ...

Question

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

我希望

.c

能够跨越整个行，但是如果我散布

grid-column: 1 / -1;

行，它会溢出 除非我在

max-content

而不是

.a

上使用min-content为什么在这种情况下

max-content

和min-content

之间有区别？

网格容器

.a

固定宽度为

100px

Answer 1

.d

孩子的固定宽度为

200px

。由于

.d

不是

.a

的直接孩子，因此

min-content

忽略它，而它会溢出，而

max-content

则包括它，因此不会。如果您在

width: 200px;

上设置

.c

，则

min-content

将以WEL的方式工作：

.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

fit-content

，以便它包含所有的孩子。

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