允许下拉列表溢出其他组件，但页脚除外

Question

我有一个装有卡片的柔性容器。该卡有一个下拉列表，允许对其他组件进行检查。为了让下拉式在卡的边缘生长，下拉式是“绝对的”，但现在它也会超过页脚。

​

​

简化代码：

<div class="flex flex-col min-h-screen bg-gray-100">
  <div id="page-container" class="flex flex-wrap justify-center sm:justify-start relative">
        <div class="border rounded-lg border-gray-300 p-4 bg-white m-2 flex flex-col">
           <div>
             <div class="flex justify-between">
               <div class="font-semibold text-xl">Card</div>
               <div class="flex items-center cursor-pointer select-none">
                  <div class="inline select-none pr-8 print-hidden">
                     <div class="text-primary"><i class="far fa-code-branch pr-4"></i>Expand</div>
                        <div class="z-10 absolute rounded-b shadow">
                        <div>
                           First item
                        </div>
                         <div>
                           ...
                        </div>
                     </div>
                  </div>
               </div>
            </div>
        </div>
     </div>
   </div>
   <div class="min-h-16 py-5 bg-red text-white flex-shrink-0">
      <div class="container mx-auto">
         <div class="h-full flex-wrap flex justify-between content-center text-center">
            <div class="w-full md:w-auto">
            <img src="https://via.placeholder.com/2000x100.png" class="inline-block h-8 ml-4"></div>
         </div>
      </div>
   </div>
</div>

是否有可能使页脚，使之停留在下拉式下？

我可以使用JavaScript来确定下拉列表的最低点，并将页脚移动到始终低于这一点的位置。但也许有一个更好的方法，通过改变一些CSS。

请参阅此CodePen以获得一个简化的示例。

Answer 1

只需将overflow-y-scroll添加到具有z-10的父div中即可。

然后为下拉列表指定max-height，如下面的max-h-[90vh]

让页脚z-20看一看https://play.tailwindcss.com/TqJJRKEEkR。