I am building a grid component and trying to get the body to trigger a scrollbar when the content exceeds the viewport of the outer element. Unfortunately, I am only getting this working when applying a height on the .body element. I would like to avoid this as it would require me to runtime apply a height via scripting, as well as having to keep track of any changes on the elements that affect its height.

Is there something I could explore, purely CSS wise to get this done? Note that the scrollbar visible in the snippet is based on the snippet contents overflowing, not on the body element overflowing.

```css
.outer {
  overflow: hidden;
  height: 500px;
}

.grid {
  border: 1px solid black;
}

.headerwrap {
  overflow: hidden;
  border: 1px solid blue;
}

.bodywrap {
  overflow: hidden;
  border: 1px solid red;
}

.body {
  overflow: auto;
  border: 1px solid green;
  /*height:300px;*/
}
```

```html
<div class="outer">
  <div class="grid">
    <div class="headerwrap">
      <div class="header">
        <table border="1" style="width:2000px;">
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
            <td>d</td>
            <td>e</td>
            <td>f</td>
          </tr>
        </table>
      </div>
    </div>
    <div class="bodywrap">
      <div class="body">
        <table border="1" style="width:2000px;height:1000px">
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>
```