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

Question

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

如果我将 header 的 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