CSS 网格在较小的屏幕上不会拉伸(stretch)到 100%

Question

我有一个包含两列的页面布局:侧边栏和其余页面内容。侧边栏需要 300px 宽度，而其余内容需要填充剩下的内容。为此，我使用了 CSS 网格和 grid-template-columns: 300px auto(甚至尝试过 grid-template-columns: 300px 1fr)。它适用于更大的屏幕。但是在平板电脑大小的屏幕上，内容不会拉伸(stretch)到 100%/不会填满剩余的内容。我不确定出了什么问题。

这是我的代码大纲:

.container {
  display: grid;
  grid-template-columns: 300px auto;
}

.sidebar {
  height: 100vh;
  background: green;
}

.content {
  height: 100vh;
  background: gray;
}

<div class="container">
  <div class="sidebar"></div>
  <div class="content"></div>
</div>

有什么地方我做错了吗？有什么方法可以用 CSS 网格来避免这个问题吗？谢谢!

Answer 1

有点晚了，但我想你可以试试这个:

.container {
   display: grid;
   grid-template-columns: 300px minmax(0, 1fr);
}