Is there any way to prevent children from being clipped by overflow-hidden on the parent.

[takdw]

Hi guys, I'm having a bit of problem displaying or positioning a popup menu that comes inside a modal component. The parent is a modal and has overflow-hidden to "make" child elements with background color respect the corner radius rule. Have a look at the code below (or here is a Tailwind Play link)

<div class="min-h-screen bg-teal-400 font-sans">
  <div class="absolute inset-0 flex items-center justify-center">
    <div class="bg-white w-full max-w-md rounded-lg overflow-hidden">
      <p class="px-4 py-2 uppercase text-sm font-semibold text-gray-600">Select the user</p>
      <div class="relative p-2 bg-gray-400 rounded-t-lg">
        <input class="block w-full rounded-lg border px-4 py-2" />
        <div class="mt-2 -mx-2 fixed border rounded-lg shadow bg-white z-50">
          <p class="py-2 px-4 hover:bg-gray-200 cursor-pointer">User 1</p>
          <p class="py-2 px-4 hover:bg-gray-200 cursor-pointer">User 2</p>
          <p class="py-2 px-4 hover:bg-gray-200 cursor-pointer">User 3</p>
          <p class="py-2 px-4 hover:bg-gray-200 cursor-pointer">User 4</p>
          <p class="py-2 px-4 hover:bg-gray-200 cursor-pointer">User 5</p>
          <p class="py-2 px-4 hover:bg-gray-200 cursor-pointer">User 6</p>
          <p class="py-2 px-4 hover:bg-gray-200 cursor-pointer">User 7</p>
          <p class="py-2 px-4 hover:bg-gray-200 cursor-pointer">User 8</p>
        </div>
      </div>
    </div>
  </div>
</div>

With an absolute class on the results container it gets clipped. fixed seems to fix that. The element is positioned right. Sort of. But I want it's width to span the width of the input. inset-x-0 doesn't work since its a fixed element and its bounds are the viewport. I've read that I can apply a transform rule to a close parent and the bounds would be that element. But then its behavior becomes the same as absolute. Is there any workaround to this?

Thanks,

[adamwathan]

The usual solution for this sort of thing is to use portals and a library like Popper.js to handle the positioning. Portals exist as first class things in most JS frameworks, and if you are just doing stuff using vanilla JS then you would just be appending your HTML to the end of the body element manually instead of inside the actual container where you don't want it to be clipped.

[MartinHughes-BPC]

Hey Tak,

I was wondering about this, and came up with a pure Tailwind solution that will work in your case. Here's a play: https://play.tailwindcss.com/jPbHqRyZN5

Basically I inserted an inner container div which is also rounded and this hides any overflow. It then relies on the CSS behaviour of absolute children going up to the nearest "placed" parent, which in this case is the outer div.

Cheers,
Martin.

[takdw]

Thanks @MartinHughes-BPC. It seems to do the trick. Thank you very much for your time.