为什么网格区域会缩小其他单元格，即使它有足够的空间？

Question

我有一个非常简单的网格，带有标题和两列。网格有一个固定的宽度：300px，而旁边也有一个固定的宽度：100px。

如果我增加标题的min-width 比200px 更多，那么aside 部分会缩小。

为什么？据说，它可以增长到两列的宽度，而不改变其他列的宽度。

.container {
  width: 300px;
  display: grid;
  grid-template-columns: minmax(0, max-content) auto;
  grid-template-rows: max-content auto;
  grid-template-areas: "header header"
    "aside main";
}
header {
  grid-area: header;
  background-color: lightblue;
  min-width: 250px;
  /* Why if min-width > 200, then the aside shrinks?? */
}
aside {
  grid-area: aside;
  background-color: lightgreen;
  width: 100px;
}
main {
  grid-area: main;
  background-color: lightpink;
}

<section class="container">
  <header>
    Header
  </header>

  <aside>
    Aside
  </aside>

  <main>
    Main
  </main>
</section>

JSFiddle：https://jsfiddle.net/a1zto75g/

Answer 1

这是minmax()、max-content 和网格项目宽度之间的复杂交互。

考虑在容器级别管理所有大小。

.container {
  height: 100vh;
  width: 300px;
  display: grid;
  grid-template-columns: 100px 1fr; /* adjustment */
  grid-template-rows: auto 1fr;     /* adjustment */
  grid-template-areas: " header header " 
                        " aside main ";
}

header {
  grid-area: header;
  background-color: lightblue;
}

aside {
  grid-area: aside;
  background-color: lightgreen;
}

main {
  grid-area: main;
  background-color: lightpink;
}

body {
  margin: 0;
}

<section class="container">
  <header>Header</header>
  <aside>Aside</aside>
  <main>Main</main>
</section>

jsFiddle demo

Answer 2

我有一个解决方法：将order: 1; 放在一边。然后，网格计算其他部分的width，然后正确放置一边。

很奇怪。

html,
body,
.container {
  height: 100%;
  margin: 0;
}

.container {
  width: 300px;
  display: grid;
  grid-template-columns: minmax(0, 100px) auto;
  grid-template-rows: 30px auto;
  grid-template-areas: "header header" "aside main";
}

header {
  grid-area: header;
  background-color: lightblue;
  min-width: 250px;
  /* Why if min-width > 200, then the aside shrinks?? */
}

aside {
  order: 1;
  /* THIS IS THE WORKOROUND */
  grid-area: aside;
  background-color: lightgreen;
  width: 100px;
}

main {
  grid-area: main;
  background-color: lightpink;
}

<section class="container">
  <header>
    Header
  </header>

  <aside>
    Aside
  </aside>

  <main>
    Main
  </main>
</section>