如何在父元素之外扩展 flex 容器

Question

I need to relatively position some flex container, so I set it parent display relative and flex itself - absolute. But the problem is that flex width does not expands outside its relative parent. How to fix this?

 <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" /> <div class="w-1/3 bg-blue-500 mx-auto my-5 relative p-4"> <div class="absolute flex flex-wrap border border-red p-4"> <div class="border-b w-1/2">content super long</div> <div class="border-b w-1/2">content super long</div> <div class="w-1/2">content super long</div> <div class="w-1/2">content super long content</div> </div> </div>

There is enough space for flex container to display its content with no line wraps. But it does not so.

I need following result:

Answer 1

You can achieve that by changing position property of parent element to static , In addition to adding another container with relative position .

Example:

 <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> <div class="w-1/3 bg-blue-500 mx-auto my-5 relative p-4" style="position:static"> <div class="container" style="position:relative"> <div style="width:500px;" class="absolute flex flex-wrap border border-red p-4"> <div class="border-b w-1/2">content super long</div> <div class="border-b w-1/2">content super long</div> <div class="w-1/2">content super long</div> <div class="w-1/2">content super long content</div> </div> </div> </div>