Всем привет,
Никто с vuetify не работал?
В Laravel 5.5/vue.js2.5/vuetify приложении я использую таблицы с данными v-data-table
и если полей много или в полях длинные строковые данные, то таблица с данными вылазиет справа и при попытке потянуть
мышкой вправо вся страница тянется вправо https://imgur.com/a/hgfzz , а не только таблица с данными.

Я взял таблицу из примера и расширил данные:

<template>

	<v-container fluid>
		<v-flex xs12  >

			<v-data-table
					:headers="headers"
					:items="items"
					hide-actions
					class="elevation-1"
			>
				<template slot="items" slot-scope="props">
					<td>{{ props.item.name }}</td>
					<td class="text-xs-right">{{ props.item.calories }}</td>
					<td class="text-xs-right">{{ props.item.fat }}</td>
					<td class="text-xs-right">{{ props.item.carbs }}</td>
					<td class="text-xs-right">{{ props.item.protein }}</td>
					<td class="text-xs-right">{{ props.item.iron }}</td>
					<td>{{ props.item.description }}</td>
				</template>
			</v-data-table>

		</v-flex>
	</v-container>

</template>

<script>
    export default {
        data() {
            return {
                headers: [
                    {
                        text: 'Dessert (100g serving)',
                        align: 'left',
                        sortable: false,
                        value: 'name'
                    },
                    {text: 'Calories', value: 'calories'},
                    {text: 'Fat (g)', value: 'fat'},
                    {text: 'Carbs (g)', value: 'carbs'},
                    {text: 'Protein (g)', value: 'protein'},
                    {text: 'Iron (%)', value: 'iron'},
                    {text: 'Description', value: 'description'}
                ],
                items: [
                    {
                        value: false,
                        name: 'Frozen Yogurt',
                        calories: 159,
                        fat: 6.0,
                        carbs: 24,
                        protein: '4.0_Lorem_ipsum_dolor_sit_amet',
                        iron: '1%',
                        description: 'Loremipsumdolorsitametconsecteturadipiscingelit... '
                    },
                    {
                        value: false,
                        name: 'Ice cream sandwich',
                        calories: 237,
                        fat: 9.0,
                        carbs: 37,
                        protein: '4.3 Lorem  ipsum dolor sit amet',
                        iron: '1%',
                        description: 'Loremipsumdolorsitametconsecteturadipiscingelit... '
                    },
                    {
                        value: false,
                        name: 'Eclair',
                        calories: 262,
                        fat: 16.0,
                        carbs: 23,
                        protein: '6.0_Lorem_ipsum_dolor_sit_amet',
                        iron: '7%',
                        description: 'Lorem  ipsum dolor sit amet, consectetur adipiscing elit... '
                    },
                    {
                        value: false,
                        name: 'Cupcake',
                        calories: 305,
                        fat: 3.7,
                        carbs: 67,
                        protein: '4.3_Lorem_ipsum_dolor_sit_amet',
                        iron: '8%',
                        description: 'Lorem  ipsum dolor sit amet, consectetur adipiscing elit... '
                    },
                ]
            }
        }
    }
</script>

В настройках v-data-table свойств горизонтальноо скроллинга я не нашел
Возможно, дело в обрамлении этой таблицы. Я искал и делал по разному но безрезультатно.
Нужен аналог как в бутстрапе :

                        <div class="table-responsive">
                            <table class="table">

А как правильно в vuetify ?
Спасибо!