Expanding to fill remaining space in a CSS Grid layout

I'd suggest to change your markup with a 3x2 grid like below:

1. Remove the hierarchical structure like you have in your code and add one element for each section in the grid.

2. Note that in the rule grid-template-columns: 250px 150px auto, 250px is the width of your col-1-outer and 150px is the width of the col-1-inner.

3. Span the first column over the two rows by using grid-row: span 2

4. Span the first row in the second column by using grid-column: span 2.

5. Extend the table over the last grid item by using 100% width and height.

See demo below:

* {
  border: 1px solid; /* For illustration */
}

#main {
  width: 100%;
  display: grid;
  grid-template-columns: 250px 150px auto;
  grid-template-rows: 100px auto;
}

#col-1-outer {
  grid-row: span 2;
}

#row-1-inner {
  grid-column: span 2;
}

#col-2-inner table {
  width: 100%;
  height: 100%;
}

<div id="main">
  <div id="col-1-outer">col-1-outer</div>
  <div id="row-1-inner">col2-row-1-inner</div>
  <div id="col-1-inner">col2-row2-inner</div>
  <div id="col-2-inner">
    <table><tr><td>table</td></tr></table>
  </div>
</div>

The 100% for the 2nd column in your grid-template-columns is based on the width of the container - rather than occupying the space outstanding within the container, it will push out to the right because the 2nd column is trying to match the width of the container.

Try changing this to auto and this should rectify the issue, as it will only take up the space up to the end of the container and no further.

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns