我的绝对位置的内部div正在扩展父div，而不是分开

Question

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
<div class="border-b flex">
   <div class="w-1/6 flex items-center justify-center p-4 border-r text-sm">
      14 hours ago
   </div>
   <div class="w-3/5 p-4 text-sm"><span>
      Dolor aliquid ipsa qui eum in voluptatem Sit non quae illo eveniet exercitation cupiditate veniam sed id animi
      </span>
   </div>
   <div class="w-1/5 flex justify-end items-center p-4 relative">
      <button class="bg-white border rounded px-1 py-1 text-xs"><i class="fa fa-chevron-down"></i></button> 
      <div class="absolute pin-b pin-r bg-white border w-32 items-center justify-center">
         <ul class="list-reset p-2">
            <li>Delete</li>
         </ul>
      </div>
   </div>
</div>

正如您从我的代码段中看到的那样，下拉列表会扩展父边框，而不是在父边框上覆盖（绝对），我如何获得它，所以我的下拉菜单（删除）不会更改父div，而只是像覆盖它们一样下图：

Answer 1

之所以这样做，是因为您已经为每个{em> border-b 子类别div设置了特定的宽度，类别为w-1/6，w-3/5（我认为应该为4/6 ...），w-1/5（...和1/6），因此内部没有绝对元素无关紧要，因为其父元素仍分配有特定的宽度，并且它将始终使用它。

.my-list-of-actions {
  top: calc(50% + 15px); /* basicaly it's 50% + half of button height to make it appear just below */
  left: 1rem; /* same as parent's padding */
}

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
<div class="border-b flex">
   <div class="w-1/6 flex items-center justify-center p-4 border-r text-sm">
      14 hours ago
   </div>
   <div class="w-4/6 p-4 text-sm"><span>
      Dolor aliquid ipsa qui eum in voluptatem Sit non quae illo eveniet exercitation cupiditate veniam sed id animi
      </span>
   </div>
   <div class="w-1/6 flex justify-start items-center p-4 relative">
      <button class="bg-white border rounded px-1 py-1 text-xs"><i class="fa fa-chevron-down">Button</i></button> 
      <div class="my-list-of-actions absolute bg-white border w-32">
      <!-- pin-b makes it stick to parent bottom and you don' want that.
      pin-r is also bad here, as it's supposed to be aligned to the left along with the button.
      Button is aligned vertically in the center so it's best to place the list just below -->
         <ul class="list-reset p-2">
            <li>Delete</li>
            <li>Edit</li>
            <li>Archive</li>
         </ul>
      </div>
   </div>
</div>