Resizing columns without overflow

Question

I want my embedded columns to be first start with 50/50 spacing, and then to be able to resize them without overflowing the column that contains them.

What I'm getting is initial columns that are approximately 20/80, and when I resize the right column bleeds outside its enclosing column until if reaches its minimum.

body {
  margin: 10px;
}

wrapper {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: [col] 50px [col] minmax(200px, 1fr) [col] minmax(200px, 1fr);
  grid-template-rows: [row] 50px [row] minmax(250px, 1fr) [row] 25px;
  width: 96vw;
  height: 96vh;
  background-color: #fff;
  color: #444;
}

header {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
  font-size: 80%;
  grid-column: col / span 3;
  grid-row: row;
}

tail {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
  font-size: 80%;
  grid-column: col 2 / span 2;
  grid-row: row 3 / span 2;
}

mode {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
  font-size: 80%;
  grid-column: col;
  grid-row: row 2 / span 3;
}

data {
  grid-column: col 2 / span 2;
  grid-row: row 2;
  display: grid;
  grid-gap: 5px;
  grid-template: "left right" 1fr / min-content 1fr;
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
  font-size: 80%;
}

primary {
  grid-area: left;
  overflow: auto;
  min-width: 120px;
  max-width: 80vw;
  resize: horizontal;
  background-color: #ccc;
  color: #444;
  border-radius: 5px;
  padding: 10px;
  font-size: 100%;
}

secondary {
  grid-area: right;
  overflow: auto;
  min-width: 120px;
  max-width: 80vw;
  background-color: #ccc;
  color: #444;
  border-radius: 5px;
  padding: 10px;
  font-size: 100%;
}

<wrapper>
  <header>header</header>
  <mode>mode</mode>
  <data>
        <primary>primary data</primary>
        <secondary>secondary data</secondary>
    </data>
  <tail>tail</tail>
</wrapper>

Answer 1

What I'm getting is initial columns that are approximately 20/80...

That seems to be what you defined for your columns:

data {
    display: grid;
    grid-template: "left right" 1fr / min-content 1fr;
}

The final two values in grid-template represent column sizes.

If you want two columns 50/50, try this instead:

data {
    display: grid;
    grid-template: "left right" 1fr / 1fr 1fr;
}

... and when I resize the right column bleeds outside its enclosing column until if reaches its minimum.

Well, you have minimum widths set.

200px minimums on the last two columns in your outer grid:

wrapper {
    display: grid;
    grid-template-columns: [col] 50px [col] minmax(200px,1fr) [col] minmax(200px,1fr);
}

120px minimums on your grid areas in your nested grid:

primary {
    grid-area: left;
    min-width: 120px;
}

secondary {
    grid-area: right;
    min-width: 120px;
}

Where do you expect them to overflow?