大型菜单 Safari 中的 Tailwind CSS 列问题/错误？

Question

我做了一个关于 Tailwind 游戏的演示。https://play.tai​​lwindcss.com/2xRDmC52V7这是正在发生的事情的简化版本。这部分是大型菜单的开头，因此是absolute财产。

使用 时absolute，Safari 上的情况会变得很奇怪。我在 TailwindCSS 中做了这个例子，因为它很简单。普通 CSS 也存在同样的问题。我正在寻找他们中任何一个的解决方案。

Safari 屏幕截图如下。

看到带有红色边框的div，它应该围绕着整个内容。

Chrome 屏幕截图如下

它应该是这样的。

问题

在 safari 中，div 不获取内容的宽度，因此菜单项位于容器 div 之外。我无法设置宽度，因为菜单是动态的（内容长度不同）。将宽度设置为 100% 也不起作用，因为它占用父菜单项的宽度（非常小）。

如何在不设置显式宽度的情况下解决此问题？

再生产

<div class="absolute">
  <div>
    <div class="flex flex-col flex-wrap bg-red-100 h-96 border-4 border-red-500">
      <div class="p-4">
        <div class="font-bold">Lorem ipsum 1</div>
        <div>Lorem ipsum</div>
        <div>Lorem ipsum</div>
        <div>Lorem ipsum</div>
        <div>Lorem ipsum</div>
        <div>Lorem ipsum</div>
        <div>Lorem ipsum</div>
        <div>Lorem ipsum</div>
        <div>Lorem ipsum</div>
        <div>Lorem ipsum</div>
        <div>Lorem ipsum</div>
        <div>Lorem ipsum</div>
        <div>Lorem ipsum</div>
      </div>
      <div class="p-4">
        <div class="font-bold">Lorem ipsum 2</div>
        <div>Lorem ipsum</div>
        <div>Lorem ipsum</div>
        <div>Lorem ipsum</div>
        <div>Lorem ipsum</div>
        <div>Lorem ipsum</div>
      </div>
      <div class="p-4">
        <div class="font-bold">Lorem ipsum 3</div>
        <div>Lorem ipsum</div>
        <div>Lorem ipsum</div>
        <div>Lorem ipsum</div>
        <div>Lorem ipsum</div>
        <div>Lorem ipsum</div>
      </div>
      <div class="p-4">
        <div class="font-bold">Lorem ipsum 4</div>
        <div>Lorem ipsum</div>
        <div>Lorem ipsum</div>
        <div>Lorem ipsum</div>
        <div>Lorem ipsum</div>
        <div>Lorem ipsum</div>
      </div>
      <div class="p-4">
        <div class="font-bold">Lorem ipsum 5</div>
        <div>Lorem ipsum</div>
        <div>Lorem ipsum</div>
        <div>Lorem ipsum</div>
        <div>Lorem ipsum</div>
        <div>Lorem ipsum</div>
      </div>
      <div class="p-4">
        <div class="font-bold">Lorem ipsu.. 6</div>
        <div>Lorem ipsum</div>
        <div>Lorem ipsum</div>
        <div>Lorem ipsum</div>
        <div>Lorem ipsum</div>
        <div>Lorem ipsum</div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.tailwindcss.com"></script>
<script>
  tailwind.config = {}
</script>

Answer 1

您可以尝试以下课程：

<div class="absolute w-full max-w-2xl h-full">
    ... your html

这应该确保绝对 div 具有其父级的完整宽度、最大宽度和高度。

我做了一个关于 Tailwind 游戏的演示

https://play.tai​​lwindcss.com/d3wCtO2I7P

希望能帮助到你。