固定内容和滚动侧边栏，将网格转换为 flexbox

如何解决固定内容和滚动侧边栏，将网格转换为 flexbox

我正在尝试使用固定的导航栏、固定大小的内容区域和可滚动的侧边栏来制作布局。这是一个非常标准的设置（虽然通常边栏在内容滚动时是固定的，但这只是语义），但重要的是内容的框不会溢出整个容器，因为我正在用一个图像填充它应用了 object-fit 以便它可以在视口内愉快地缩放，同时保持其纵横比。

我实际上有一个使用网格的功能版本（嵌入并在下面链接）。问题在于，如果我希望侧边栏消失，我必须更改父 div 上的样式，这在我使用的组件系统中很混乱（但可行）。理想情况下，我只需将侧边栏设置为 display: none，内容就会填满整个空间。

我已经尝试将整个内容转换为 flexBox，并将第二行变成嵌套网格，但我似乎无法在保留整体高度锁定的同时执行其中任何一项操作。

这是工作网格（和 a CodePen）。

html,body {
  margin: 0;
}

.wrapper {
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 150px;
  grid-template-rows: auto 1fr;
}

nav {
  height: 50px;
  grid-row: 1;
  grid-column: 1 / span 2;
  background-color: darkseagreen;
}

.content {
  background-color: salmon;
  position: relative;
}

img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.sidebar {
  overflow-y: scroll;
  background-color: cornflowerblue;
}

<div class="wrapper">
  <nav>Navbar should stay fixed</nav>
  <div class="content">
    <img src="http://placehold.it/640x360">
  </div>
  <div class="sidebar">
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro repudiandae,laboriosam dolorum mollitia fugit autem officiis explicabo minima! Maxime ea a unde alias laboriosam vel pariatur delectus. A,quas ratione?</div>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque temporibus sunt,nesciunt et assumenda asperiores fuga aperiam nulla voluptas reprehenderit iusto molestias blanditiis corrupti,nobis ab id dolorum obcaecati ullam!</div>
  </div>
</div>

有没有办法制作这个，让第二行变成一个 flexBox，同时保持其高度不扩展，这样我就可以折叠侧边栏而不必重新布局整个网格？ （如果有更聪明的方法来获得我正在尝试的 img 缩放，我也愿意接受。）

解决方法

只需将模板更新为grid-template-columns: 1fr auto;并使侧边栏的宽度等于150px；

html,body {
  margin: 0;
}

.wrapper {
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr;
}

nav {
  height: 50px;
  grid-row: 1;
  grid-column: 1 / span 2;
  background-color: darkseagreen;
}

.content {
  background-color: salmon;
  position: relative;
}

img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.sidebar {
  overflow-y: scroll;
  background-color: cornflowerblue;
  width:150px;
}

<div class="wrapper">
  <nav>Navbar should stay fixed</nav>
  <div class="content">
    <img src="http://placehold.it/640x360">
  </div>
  <div class="sidebar" style="display:none;">
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro repudiandae,laboriosam dolorum mollitia fugit autem officiis explicabo minima! Maxime ea a unde alias laboriosam vel pariatur delectus. A,quas ratione?</div>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque temporibus sunt,nesciunt et assumenda asperiores fuga aperiam nulla voluptas reprehenderit iusto molestias blanditiis corrupti,nobis ab id dolorum obcaecati ullam!</div>
  </div>
</div>