I try to create a layout where I have a table in my main view. It might happen that the table is wider than the actual main view, in that case I want to scroll the main view but not the sidebar.

Now the table overflows and I scroll the whole window, which isn't that pretty.

This codepen shows my problem: <https://codepen.io/tomas-jansson/pen/ExZdyMx>

```
<body>
  <div class="parent bg-gray-900 flex flex-col h-screen text-gray-100 w-screen">
    <header class="bg-gray-800 p-4 flex border-b border-solid border-gray-600">
      <span class="flex flex-1">
        <a href="#" class="text-gray-100 flex">
          Header 1
        </a>
        <span class="text-right flex-1 mr-4">
          Header 2
        </span>
      </span>
    </header>
    <div class="main flex-1 flex">
      <div class="nav-bar bg-gray-800 w-60 flex-none">navbar</div>
      <div class="content flex-1">
                <div class="flex w-full h-full flex-col">
            <div class="header w-full flex bg-gray-700">
                <div class="w-full ml-6 flex flex-row">
                  <a href="#" class="py-4 pl-4 pr-4 text-gray-100 hover:text-gray-300 hover:bg-gray-600" >
                    <div>
                      item title
                    </div>
                  </a>
                  <a href="#" class="py-4 pl-4 pr-4 text-gray-100 hover:text-gray-300 hover:bg-gray-600 border-solid border-blue-500 border-b-2 text-blue-500" >
                    <div>
                      item title
                    </div>
                  </a>
                </div>
            </div>
            <div className="content w-full flex-1 flex">
              <div class="flex-1 flex overflow-x-scroll">
                <div class="align-middle border-b border-gray-200 flex flex-1" style="">
                  <table class="divide-y divide-gray-200 min-w-full" role="table">
                    <thead class="">
                      <tr role="row">
                        <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
                            colspan="1" role="columnheader">Col 1</th>
                        <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
                            colspan="1" role="columnheader">Col2</th>
                        <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
                            colspan="1" role="columnheader">ColXXX</th>
                        <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
                            colspan="1" role="columnheader">ColXXX</th>
                        <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
                            colspan="1" role="columnheader">ColXXX</th>
                        <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
                            colspan="1" role="columnheader">ColXXX</th>
                        <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
                            colspan="1" role="columnheader">ColXXX</th>
                        <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
                            colspan="1" role="columnheader">ColXXX</th>
                        <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
                            colspan="1" role="columnheader">ColXXX</th>
                      </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200" role="rowgroup">
                      <tr role="row">
                        <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900" role="cell">XXX
                        </td>
                        <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900" role="cell">
                          PERCENTAGE</td>
                        <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900" role="cell">10
                        </td>
                        <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900" role="cell">0
                        </td>
                        <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900" role="cell">0
                        </td>
                        <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900" role="cell">10
                        </td>
                        <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900" role="cell">10
                        </td>
                        <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900" role="cell">10
                        </td>
                        <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900" role="cell">5
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

```

If you make the window small enough you'll see that the table stops to shrink, which is ok, but the overflow is for the whole page and the background in the overflow area is not the right background either.
I'm using tailwind to style page.