title: CSS subgrid element overflow issue
body: <p>I have an overflow issue with a subgrid element. Considering the following code, the second element in the subgrid is prohibited from overflowing by overflow-wrap. This works, but the Gri container does not increase in size to make the grid element fit, and it flows into the third item of the sub grid. 
  How do I prevent this from happening?</p>
  
  <pre><code>&lt;html&gt;
  
    &lt;style type="text/css"&gt;
  
      body {
        width: 1000px;
        margin-left: auto;
        margin-right: auto;
      }
  
      .layout {
        width: 100%;
        display: grid;
        grid-template-columns: 20% 80%;
        grid-template-rows: 100%;
        box-sizing: border-box;
      }
  
      .left {
        width: 100%;
        grid-column-start: 1;
        grid-column-end: 1;
        box-sizing: border-box;
        word-wrap: break-word;
      }
      .right {
        width: 100%;
        grid-column-start: 2;
        grid-column-end: 2;
        box-sizing: border-box;
      }
  
      .container {
        box-sizing: border-box;
        margin-left: 4px;
        margin-right: 4px;
        padding-top: 4px;
        padding-bottom: 4px;
        border-bottom: 1px solid black;
        overflow-wrap: break-word;
      }
  
      .container:last-child {
        padding-bottom: 4px;
        border-bottom: none;
      }
  
      .grid {
        display: grid;
        grid-template-columns: minmax(auto, 80%) auto;
        grid-template-rows: 100%;
      }
  
      .col1 {
        grid-column-start: 1;
        grid-column-end: 1;
        grid-row-start: 1;
        grid-row-end: 1;
        justify-self: left;
        align-self: start;
      }
  
      .col2 {
        grid-column-start: 2;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 1;
        justify-self: right;
        align-self: start;
      }
  
    &lt;/style&gt;
    &lt;body&gt;
  
      &lt;div class="layout"&gt;
        &lt;div class="left"&gt;
          test
        &lt;/div&gt;
        &lt;div class="right"&gt;
          &lt;div class="container grid"&gt;
            &lt;div class="col1"&gt;
              &lt;p&gt;TEST&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="col2"&gt;
              &lt;p&gt;test&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="container grid"&gt;
            &lt;div class="col1"&gt;
              &lt;p&gt;test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test &lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="col2"&gt;
              &lt;p&gt;test&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="container grid"&gt;
            &lt;div class="col1"&gt;
              &lt;p&gt;TTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="col2"&gt;
              &lt;p&gt;test&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="grid"&gt;
            &lt;div class="col1"&gt;
              &lt;p&gt;TEST&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="col2"&gt;
              &lt;p&gt;test&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>