同级元素具有display:block时的水平滚动冲突

问题描述 投票：0回答：1

添加 

overflow-x-auto
在 
contents
中水平滚动时，会导致表格溢出到 
contents
之外，并且滚动位于视口中。当 
sidebar
用显示块打开时会发生这种情况。但是，当您转到移动设备或删除侧边栏时，内容滚动将按预期工作。如何解决侧边栏打开时内容滚动的问题？

注1：这是我可以更新代码的最紧凑的。

注意2：要完整查看问题，您可能需要在运行代码片段时单击整个页面并放大。

the problem

<script src="https://cdn.tailwindcss.com/3.4.14"></script>
<body class="font-sans antialiased">
    <div class="flex h-screen bg-red-50 dark:bg-red-900">
        <!-- sidebar -->
        <aside class="z-20 hidden w-64 overflow-y-auto bg-white dark:bg-gray-800 md:block flex-shrink-0">
            <div class="py-4 text-gray-500 dark:text-gray-400">
                <a class="ml-6 text-lg font-bold text-gray-800 dark:text-gray-200">
                    APP
                </a>
            </div>
        </aside>

        <!-- contents -->
        <div class="flex flex-col flex-1 w-full">
            <main class="h-full overflow-y-auto">
                <div class="py-12">
                    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                        <div class="bg-blue-50 overflow-hidden shadow-sm sm:rounded-lg overflow-x-auto max-w-full">
                            <div class="p-6 text-gray-900">
                                <table class="table-fixed w-full">
                                    <thead>
                                        <tr class="bg-gray-100">
                                            <th class="px-4 py-2 w-20">No.</th>
                                            <th class="px-4 py-2 w-52">Name</th>
                                            <th class="px-4 py-2 w-52">Address</th>
                                            <th class="px-4 py-2 w-44">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td class="border px-4 py-2">1</td>
                                            <td class="border px-4 whitespace-nowrap py-2">
                                                name1
                                            </td>
                                            <td class="border px-4 whitespace-nowrap py-2">
                                                address 1
                                            </td>
                                            <td lass="border px-4 py-2 flex gap-2 items-center justify-between">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="border px-4 py-2">1</td>
                                            <td class="border px-4 whitespace-nowrap py-2">
                                                name 2
                                            </td>
                                            <td class="border px-4 whitespace-nowrap py-2">
                                                address 2
                                            </td>
                                            <td lass="border px-4 py-2 flex gap-2 items-center justify-between">
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>
</body>

css tailwind-css
1个回答
0
投票
由于内容采用水平弹性布局，因此 

min-width: min-content
隐式应用于内容 
<div>
。这会导致 
<div>
永远不会收缩到表格宽度以下，因此永远不会“激活”子元素上的 
overflow-x: auto
。相反，它会导致根溢出
<div>
。

相反，我们希望缩小内容 

<div>
，以便表格可以溢出 
overflow-x-auto
元素。我们可以通过 
min-width: min-content
类用 
min-width: 0
覆盖 
min-w-0
来做到这一点：

<script src="https://cdn.tailwindcss.com/3.4.14"></script>
<body class="font-sans antialiased">
    <div class="flex h-screen bg-red-50 dark:bg-red-900">
        <!-- sidebar -->
        <aside class="z-20 hidden w-64 overflow-y-auto bg-white dark:bg-gray-800 md:block flex-shrink-0">
            <div class="py-4 text-gray-500 dark:text-gray-400">
                <a class="ml-6 text-lg font-bold text-gray-800 dark:text-gray-200">
                    APP
                </a>
            </div>
        </aside>

        <!-- contents -->
        <div class="flex flex-col flex-1 w-full min-w-0">
            <main class="h-full overflow-y-auto">
                <div class="py-12">
                    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                        <div class="bg-blue-50 overflow-hidden shadow-sm sm:rounded-lg overflow-x-auto max-w-full">
                            <div class="p-6 text-gray-900">
                                <table class="table-fixed w-full">
                                    <thead>
                                        <tr class="bg-gray-100">
                                            <th class="px-4 py-2 w-20">No.</th>
                                            <th class="px-4 py-2 w-52">Name</th>
                                            <th class="px-4 py-2 w-52">Address</th>
                                            <th class="px-4 py-2 w-44">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td class="border px-4 py-2">1</td>
                                            <td class="border px-4 whitespace-nowrap py-2">
                                                name1
                                            </td>
                                            <td class="border px-4 whitespace-nowrap py-2">
                                                address 1
                                            </td>
                                            <td lass="border px-4 py-2 flex gap-2 items-center justify-between">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="border px-4 py-2">1</td>
                                            <td class="border px-4 whitespace-nowrap py-2">
                                                name 2
                                            </td>
                                            <td class="border px-4 whitespace-nowrap py-2">
                                                address 2
                                            </td>
                                            <td lass="border px-4 py-2 flex gap-2 items-center justify-between">
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>
</body>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.