Fixed content and scrolling sidebar, converting grid to flexbox - css

Question

I'm trying to make a layout with a fixed navbar, a fixed-size content area, and a scrollable sidebar. This is a pretty standard setup (though usually the sidebar is fixed while the content scrolls, but that's just semantics), but it's important that the content's box doesn't overflow the overall container, since I'm filling it with an image that gets an object-fit applied so it can scale happily within the viewport while maintaining its aspect ratio.
I actually have a functioning version of it using grid (embedded and linked below). The problem there is that if I want the sidebar to go away, I have to change the styling on the parent divs, which is messy (but doable) in the component system I'm using. Ideally I'd be able to simply set the sidebar to display: none and the content would fill the space.
I've tried converting the whole thing to flexbox, and making the second row into a nested grid, but I can't seem to do either of those while retaining the overall height lock.
Here's the working grid (and 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>
Is there a way to craft this so the second row becomes a flexbox while keeping its height from expanding, so I could collapse the sidebar without having to re-layout a whole grid? (If there's a more clever way to get the img scaling I'm attempting, I'm open to that, too.)

Answer 1

Simply update the template to grid-template-columns: 1fr auto; and make the width of sidebar to be equal to 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>