second overflow appears when shrinking - html

Question

I have this setup. If you open this snippet with full page, you will see that an second overflow scrollbar appears. I actually want that the width adapts to the shrinking.
Its because the sm:ml-80 margin.
I dont know why. If you wonder why i have it like this, there is actually an sidebar witch i did not included here for simplicity.
I have marked the div with id="thisdiv". This div exceeds the width.
let v = new Vue({
el: "#app",
data(){
return {
rows: [
{
name: 'User',
},
{
name: 'Jänner',
},
{
name: 'Februar',
},
{
name: 'März',
},
{
name: 'April',
},
{
name: 'Mai',
},
{
name: 'Juni',
},
{
name: 'Juli',
},
{
name: 'August',
},
{
name: 'September',
},
{
name: 'Oktober',
},
{
name: 'November',
},
{
name: 'Dezember',
},
],
}
}
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" class="flex">
<div class="sm:ml-80"></div>
<div class="transition mt-14 w-full p-2">
<div class="mx-auto max-w-7xl">
<div class="w-full">
<div class="flex flex-col">
<div class="flex justify-between">
<div id="thisdiv" class="max-w-screen-md overflow-auto">
<div>
<table class="my-2">
<thead class="bg-white border-b">
<tr class="text-blue-500">
<th
v-for="row in rows"
scope="col"
class="text-sm font-medium px-6 py-4 text-left"
>
{{ row.name }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="data in tableData" class="bg-gray-100 border-b">
<td
v-for="col in data"
class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900"
>
{{ col }}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>