我的内在 div 与绝对定位正在扩展我的 parent 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>

正如您从我的代码片段中看到的那样，下拉列表扩展了 parent 边框而不是覆盖（绝对）它们，我怎样才能得到它以便我的下拉列表（删除）不会更改 parent div，但像下图一样叠加它们：

Answer 1

之所以这样做，是因为您已经为每个 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>

我的内在 div 与绝对定位正在扩展我的 parent div，而不是分开

My inner div with positioning of absolute is expanding my parent div, rather than being separate

css

tailwind-css