title: How to size a CSS grid row by individual cell rather than the cell with most content
body: <p>I have a CSS grid where the rows are mostly fixed in size except for the last row which is sized using minmax(26rem, auto). The first cell in this row has dynamic content that can increase the height of the row when the width of the column shrinks. This works well but when the last cell (high content cell) of the row is included it has too much content and forces the row to be auto. The high content cell is scrollable so not all of it's content needs to be shown.</p>
  
  <p>I have put the high content cell in a div with a max-height and used a media query to increase the height when the screen gets too small (about the point when the dynamic cell content changes). This is ok but it's not the smoothest transition, and because it's based on screen width the query is not necessarily triggered at the same time that the first cell's content changes.</p>
  
  <p>I want to know if there's a way to size the row based on the content of the dynamic cell rather than the content of the max content cell.</p>
  
  <p>I've included the code below and js-fiddle here <a href="https://jsfiddle.net/d03a1stb/" rel="nofollow noreferrer">https://jsfiddle.net/d03a1stb/</a> .
  The easiest way to see the effect I am describing is by running the code snippet, making it full screen and changing your browser width (or using dev tools to change the viewport size).</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Grid */
  .grid {
    display: grid;
    grid-gap: 0;
    grid-template-columns: 1fr 1fr;
    grid-template-rows:  6rem minmax(26rem, auto);
    justify-items: center;
  }
  
  /* Cells */
  .h_cell {
    border: 1px solid black;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  /* Dynamic cell style */
  .flex_space {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }
  
  .checkbox_box {
    border: solid black;
    min-width: 10rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  /* High Content cell style */
  .subform_outer {
    position: relative;
    padding: 0;
    overflow: auto;
    margin-bottom: 10px;
    width: 100%;
  
    height: 26rem;
  }
  
  @media (max-width: 1200px) {
    .subform_outer {
      height: 100%;
    }
  }
  
  .subform_content
    {
      padding: 10px;
      height: 500px;
    }
  
  /*List styling - can probably ignore*/
  td
    {
      font-size: 10pt;
      border: solid 1px #888;
      padding: 5px;
      min-width: 33px;
    }
  
  .row_style {
    border-right: 0;
    padding: 0;
    border-left-width: 1px;
    border-left-color: #888;
  }
  
  .list_row_check
    {
      border: 0;
      min-width: 10px;
    }
  
  .list_row_controls
    {
      border: 0;
      text-align: right;
      padding-right: 0;
    }
  
  .list_row_controls input
    {
      min-width: 70px;
    }
  
  .end_row_style {
    border: 0;
    margin-left: 1px;
    border-left: 1px solid #888;
    min-width: 53px;
  }
  
  p {
    margin: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body class="grid"&gt;
      &lt;div class="h_cell"&gt;
        &lt;h3&gt;subtitle&lt;/h3&gt;
        num
      &lt;/div&gt;
      &lt;div class="h_cell"&gt;
        &lt;h3&gt;subtitle&lt;/h3&gt;
        &lt;time&gt;num&lt;/time&gt;
      &lt;/div&gt;
    &lt;div  class="h_cell"&gt;
      &lt;h2&gt;Dynamic Cell&lt;/h2&gt;
        &lt;div class="flex_space"&gt;
          &lt;div class="checkbox_box"&gt;
            &lt;h3&gt;AA&lt;/h3&gt;
              &lt;p&gt;A&lt;/p&gt;&lt;p&gt;B&lt;/p&gt;&lt;p&gt;C&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="checkbox_box"&gt;
            &lt;h3&gt;BB&lt;/h3&gt;
              &lt;p&gt;D&lt;/p&gt;&lt;p&gt;E&lt;/p&gt;&lt;p&gt;F&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="checkbox_box"&gt;
            &lt;h3&gt;CC&lt;/h3&gt;
              &lt;p&gt;G&lt;/p&gt;&lt;p&gt;H&lt;/p&gt;&lt;p&gt;I&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="checkbox_box"&gt;
            &lt;h3&gt;DD&lt;/h3&gt;
              &lt;p&gt;J&lt;/p&gt;&lt;p&gt;K&lt;/p&gt;&lt;p&gt;L&lt;/p&gt;&lt;p&gt;M&lt;/p&gt;&lt;p&gt;N&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="checkbox_box"&gt;
            &lt;h3&gt;EE&lt;/h3&gt;
              &lt;p&gt;O&lt;/p&gt;&lt;p&gt;P&lt;/p&gt;&lt;p&gt;Q&lt;/p&gt;&lt;p&gt;R&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;div class="h_cell"&gt;
      &lt;div class="subform_outer"&gt;
          &lt;div class="subform_content" &gt;
  
            &lt;h3&gt;High Content Cell&lt;/h3&gt;
  
      &lt;table&gt;
        &lt;tr&gt;
          &lt;td class="list_row_check"&gt;&lt;input type="checkbox" name="l1"&gt;&lt;/td&gt;
          &lt;td class = "row_style"&gt;Text text text text Text text text text&lt;/td&gt;
          &lt;td class="list_row_controls end_row_style"&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class="list_row_check"&gt;&lt;input type="checkbox" name="l1"&gt;&lt;/td&gt;
          &lt;td class = "row_style"&gt;Text text text text Text text text text&lt;/td&gt;
          &lt;td class="list_row_controls end_row_style"&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class="list_row_check"&gt;&lt;input type="checkbox" name="l1"&gt;&lt;/td&gt;
          &lt;td class = "row_style"&gt;Text text text text Text text text text&lt;/td&gt;
          &lt;td class="list_row_controls end_row_style"&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class="list_row_check"&gt;&lt;input type="checkbox" name="l1"&gt;&lt;/td&gt;
          &lt;td class = "row_style"&gt;Text text text text Text text text text&lt;/td&gt;
          &lt;td class="list_row_controls end_row_style"&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class="list_row_check"&gt;&lt;input type="checkbox" name="l1"&gt;&lt;/td&gt;
          &lt;td class = "row_style"&gt;Text text text text Text text text text&lt;/td&gt;
          &lt;td class="list_row_controls end_row_style"&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class="list_row_check"&gt;&lt;input type="checkbox" name="l1"&gt;&lt;/td&gt;
          &lt;td class = "row_style"&gt;Text text text text Text text text text&lt;/td&gt;
          &lt;td class="list_row_controls end_row_style"&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class="list_row_check"&gt;&lt;input type="checkbox" name="l1"&gt;&lt;/td&gt;
          &lt;td class = "row_style"&gt;Text text text text Text text text text&lt;/td&gt;
          &lt;td class="list_row_controls end_row_style"&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class="list_row_check"&gt;&lt;input type="checkbox" name="l1"&gt;&lt;/td&gt;
          &lt;td class = "row_style"&gt;Text text text text Text text text text&lt;/td&gt;
          &lt;td class="list_row_controls end_row_style"&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class="list_row_check"&gt;&lt;input type="checkbox" name="l1"&gt;&lt;/td&gt;
          &lt;td class = "row_style"&gt;Text text text text Text text text text&lt;/td&gt;
          &lt;td class="list_row_controls end_row_style"&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class="list_row_check"&gt;&lt;input type="checkbox" name="l1"&gt;&lt;/td&gt;
          &lt;td class = "row_style"&gt;Text text text text Text text text text&lt;/td&gt;
          &lt;td class="list_row_controls end_row_style"&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class="list_row_check"&gt;&lt;input type="checkbox" name="l1"&gt;&lt;/td&gt;
          &lt;td class = "row_style"&gt;Text text text text Text text text text&lt;/td&gt;
          &lt;td class="list_row_controls end_row_style"&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class="list_row_check"&gt;&lt;input type="checkbox" name="l1"&gt;&lt;/td&gt;
          &lt;td class = "row_style"&gt;Text text text text Text text text text&lt;/td&gt;
          &lt;td class="list_row_controls end_row_style"&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class="list_row_check"&gt;&lt;input type="checkbox" name="l1"&gt;&lt;/td&gt;
          &lt;td class = "row_style"&gt;Text text text text Text text text text&lt;/td&gt;
          &lt;td class="list_row_controls end_row_style"&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class="list_row_check"&gt;&lt;input type="checkbox" name="l1"&gt;&lt;/td&gt;
          &lt;td class = "row_style"&gt;Text text text text Text text text text&lt;/td&gt;
          &lt;td class="list_row_controls end_row_style"&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class="list_row_check"&gt;&lt;input type="checkbox" name="l1"&gt;&lt;/td&gt;
          &lt;td class = "row_style"&gt;Text text text text Text text text text&lt;/td&gt;
          &lt;td class="list_row_controls end_row_style"&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class="list_row_check"&gt;&lt;input type="checkbox" name="l1"&gt;&lt;/td&gt;
          &lt;td class = "row_style"&gt;Text text text text Text text text text&lt;/td&gt;
          &lt;td class="list_row_controls end_row_style"&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class="list_row_check"&gt;&lt;input type="checkbox" name="l1"&gt;&lt;/td&gt;
          &lt;td class = "row_style"&gt;Text text text text Text text text text&lt;/td&gt;
          &lt;td class="list_row_controls end_row_style"&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class="list_row_check"&gt;&lt;input type="checkbox" name="l1"&gt;&lt;/td&gt;
          &lt;td class = "row_style"&gt;Text text text text Text text text text&lt;/td&gt;
          &lt;td class="list_row_controls end_row_style"&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class="list_row_check"&gt;&lt;input type="checkbox" name="l1"&gt;&lt;/td&gt;
          &lt;td class = "row_style"&gt;Text text text text Text text text text&lt;/td&gt;
          &lt;td class="list_row_controls end_row_style"&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class="list_row_check"&gt;&lt;input type="checkbox" name="l1"&gt;&lt;/td&gt;
          &lt;td class = "row_style"&gt;Text text text text Text text text text&lt;/td&gt;
          &lt;td class="list_row_controls end_row_style"&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class="list_row_check"&gt;&lt;input type="checkbox" name="l1"&gt;&lt;/td&gt;
          &lt;td class = "row_style"&gt;Text text text text Text text text text&lt;/td&gt;
          &lt;td class="list_row_controls end_row_style"&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class="list_row_check"&gt;&lt;input type="checkbox" name="l1"&gt;&lt;/td&gt;
          &lt;td class = "row_style"&gt;Text text text text Text text text text&lt;/td&gt;
          &lt;td class="list_row_controls end_row_style"&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class="list_row_check"&gt;&lt;input type="checkbox" name="l1"&gt;&lt;/td&gt;
          &lt;td class = "row_style"&gt;Text text text text Text text text text&lt;/td&gt;
          &lt;td class="list_row_controls end_row_style"&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class="list_row_check"&gt;&lt;input type="checkbox" name="l1"&gt;&lt;/td&gt;
          &lt;td class = "row_style"&gt;Text text text text Text text text text&lt;/td&gt;
          &lt;td class="list_row_controls end_row_style"&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class="list_row_check"&gt;&lt;input type="checkbox" name="l1"&gt;&lt;/td&gt;
          &lt;td class = "row_style"&gt;Text text text text Text text text text&lt;/td&gt;
          &lt;td class="list_row_controls end_row_style"&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class="list_row_check"&gt;&lt;input type="checkbox" name="l1"&gt;&lt;/td&gt;
          &lt;td class = "row_style"&gt;Text text text text Text text text text&lt;/td&gt;
          &lt;td class="list_row_controls end_row_style"&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class="list_row_check"&gt;&lt;input type="checkbox" name="l1"&gt;&lt;/td&gt;
          &lt;td class = "row_style"&gt;Text text text text Text text text text&lt;/td&gt;
          &lt;td class="list_row_controls end_row_style"&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class="list_row_check"&gt;&lt;input type="checkbox" name="l1"&gt;&lt;/td&gt;
          &lt;td class = "row_style"&gt;Text text text text Text text text text&lt;/td&gt;
          &lt;td class="list_row_controls end_row_style"&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class="list_row_check"&gt;&lt;input type="checkbox" name="l1"&gt;&lt;/td&gt;
          &lt;td class = "row_style"&gt;Text text text text Text text text text&lt;/td&gt;
          &lt;td class="list_row_controls end_row_style"&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class="list_row_check"&gt;&lt;input type="checkbox" name="l1"&gt;&lt;/td&gt;
          &lt;td class = "row_style"&gt;Text text text text Text text text text&lt;/td&gt;
          &lt;td class="list_row_controls end_row_style"&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class="list_row_check"&gt;&lt;input type="checkbox" name="l1"&gt;&lt;/td&gt;
          &lt;td class = "row_style"&gt;Text text text text Text text text text&lt;/td&gt;
          &lt;td class="list_row_controls end_row_style"&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class="list_row_check"&gt;&lt;input type="checkbox" name="l1"&gt;&lt;/td&gt;
          &lt;td class = "row_style"&gt;Text text text text Text text text text&lt;/td&gt;
          &lt;td class="list_row_controls end_row_style"&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class="list_row_check"&gt;&lt;input type="checkbox" name="l1"&gt;&lt;/td&gt;
          &lt;td class = "row_style"&gt;Text text text text Text text text text&lt;/td&gt;
          &lt;td class="list_row_controls end_row_style"&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class="list_row_check"&gt;&lt;input type="checkbox" name="l1"&gt;&lt;/td&gt;
          &lt;td class = "row_style"&gt;Text text text text Text text text text&lt;/td&gt;
          &lt;td class="list_row_controls end_row_style"&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class="list_row_check"&gt;&lt;input type="checkbox" name="l1"&gt;&lt;/td&gt;
          &lt;td class = "row_style"&gt;Text text text text Text text text text&lt;/td&gt;
          &lt;td class="list_row_controls end_row_style"&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class="list_row_check"&gt;&lt;input type="checkbox" name="l1"&gt;&lt;/td&gt;
          &lt;td class = "row_style"&gt;Text text text text Text text text text&lt;/td&gt;
          &lt;td class="list_row_controls end_row_style"&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class="list_row_check"&gt;&lt;input type="checkbox" name="l1"&gt;&lt;/td&gt;
          &lt;td class = "row_style"&gt;Text text text text Text text text text&lt;/td&gt;
          &lt;td class="list_row_controls end_row_style"&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class="list_row_check"&gt;&lt;input type="checkbox" name="l1"&gt;&lt;/td&gt;
          &lt;td class = "row_style"&gt;Text text text text Text text text text&lt;/td&gt;
          &lt;td class="list_row_controls end_row_style"&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>