小编Aki*_*kif的帖子

我试图设置这台机器:https://github.com/ByteInternet/hypernode-vagrant

当我这样做时,vagrant up我得到以下错误:Timed out while waiting for the machine to boot.

完整的错误上下文:

$ vagrant up
Bringing machine 'hypernode' up with 'virtualbox' provider...
==> hypernode: Will use PHP 7. If you want PHP 5.5 instead change the php version in local.yml.
==> hypernode: Checking if box 'hypernode_php7' is up to date...
==> hypernode: Clearing any previously set forwarded ports...
==> hypernode: Clearing any previously set network interfaces...
==> hypernode: Preparing network interfaces based on configuration... …

我做了一个关于 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 …