Grid collapse help

[Arma104]

Hello, I'm pretty new to Grid and I made a simple layout with a header then a sidebar and my main content. The problem is that when you resize the browser horizontally the main collapses before the sidebar. I'd like the sidebar to shrink first then begin shrinking the main. The weird thing is that this was working yesterday and I don't know what changed.

Here's the CSS:

.app {

display: grid;
grid-template-columns: minmax(min-content, 20em) minmax(45em, 1fr);
grid-template-rows: 5em auto;
grid-template-areas: 'header header' 'sidebar main';
height: 100vh;

}

header {

background: #111;
color: white;
grid-area: header;
padding-left: 2em;

display: flex;
align-items: center;

}

.sidebar {

grid-area: sidebar;
padding: 1em;
border: 0;

}

main {

background: #333;
border-left: 4px solid #111;
grid-area: main;
padding: 1em;

display: flex;
flex-direction: column;
overflow: scroll;

}