grid layout with resize horizontal not resizing columns

Question

I've got a grid layout and I'm using resize: horizontal on one. It lets me resize the box but it doesn't resize the other columns as I would expect it to.

html,
body,
.main {
  height: 100%;
  margin: 0;
}

.main {
  display: grid;
  grid-template-columns: minmax(100px, 200px) 1fr;
  grid-template-rows: 50px 1fr;
  gap: 2px 2px;
  grid-auto-flow: row;
  grid-template-areas: "header-box header-box" "left-box main-box";
}

.header-box {
  background-color: lightblue;
  grid-area: header-box;
  overflow: hidden;
}

.left-box {
  background-color: lightgreen;
  grid-area: left-box;
  resize: horizontal;
  overflow: auto;
}

.main-box {
  background-color: lightpink;
  grid-area: main-box;
  overflow: auto;
}

<div class="main">
  <div class="header-box">header box</div>
  <div class="left-box">left box</div>
  <div class="main-box">main box</div>
</div>

Answer 1

minmax(100px, 200px) is as good as 200px if you want shrinking behavior change to minmax(100px, 1fr)

If you want the grid to responsed to the content rather than the available width of it's own parent change to display: inline-grid;

html,
body,
.main {
  height: 100%;
  margin: 0;
}

.main {
  display:inline-grid;
  grid-template-columns: minmax(100px, 1fr) 1fr;
  grid-template-rows: 50px 1fr;
  gap: 2px 2px;
  grid-auto-flow: row;
  grid-template-areas: "header-box header-box" "left-box main-box";
}

.header-box {
  background-color: lightblue;
  grid-area: header-box;
  overflow: hidden;
}

.left-box {
  background-color: lightgreen;
  grid-area: left-box;
  resize: horizontal;
  overflow: auto;
}

.main-box {
  background-color: lightpink;
  grid-area: main-box;
  overflow: auto;
}

<div class="main">
  <div class="header-box">header box</div>
  <div class="left-box">left box</div>
  <div class="main-box">main box</div>
</div>