我试图创建一个布局，在主视图中有一个表。表可能比实际的主视图宽，在这种情况下，我想滚动主视图，但不想滚动侧边栏。
现在表溢出了，我滚动了整个窗口，这就不那么好看了。
此代码笔显示了我的问题：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>
如果你让窗口足够小，你会看到表格停止收缩，这是可以的，但溢出是针对整个页面的，溢出区域的背景也不是正确的背景。我正在使用顺风来设计页面样式。
可以将overflow-auto类添加到content以在content区域中滚动：
<div class="main flex-1 flex">
<div class="nav-bar bg-gray-800 w-60 flex-none">navbar</div>
<div class="content flex-1 overflow-auto">
<!-- The other code is omitted for the brevity -->
</div>
</div>
一个例子：
<link href="https://www.unpkg.com/tailwindcss@2.1.1/dist/tailwind.min.css" rel="stylesheet">
<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 overflow-auto">
<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>了解flex结构的工作原理将是布局页面的良好开端。请参阅演示。
<div class="h-screen flex flex-col overflow-hidden bg-gray-100">
<!-- Header -->
<header class="h-12 bg-gray-200">
<div class="flex justify-between items-center h-full">
<div>Header 1</div>
<div>Header 2</div>
</div>
</header>
<!-- Body -->
<div class="flex flex-1">
<!-- Navigation -->
<nav class="w-60 bg-gray-300">Navbar</nav>
<!-- Main -->
<main class="bg-gray-400 overflow-auto w-full">
<div class="overflow-x-scroll w-full">
<table class="divide-y divide-gray-200 w-full" role="table">
<thead>
<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>
</main>
</div>
</div>