Always show dropdown directly below button with flexbox - html

Question

I have created the following responsive navigation bar with Tailwind and have a problem with the dropdown button ("Folgen") which shows the content always somewhere else on the x-axis than the button (depending on the window width).
How could I make sure that the dropdown always stays within the browser window (no overflow outside of the window) and stay close to the button depending on the browser width?
<nav class="bg-blue-800 shadow-lg sticky top-0 z-50 h-[3.75rem]">
<div class="max-w-6xl mx-auto px-4 h-[3.75rem]">
<div class="flex justify-between h-[3.75rem]">
<div class="flex space-x-7">
<div>
<!-- Website Logo -->
<a class="flex items-center py-4 px-2 text-white font-bold text-lg" href="<?= $site->url() ?>"><?= $site->title()->html() ?></a>
</a>
</div>
<!-- Primary Navbar items -->
<div class="hidden md:flex items-center space-x-1">
<?php foreach ($site->children()->listed() as $item): ?>
<a class="py-4 px-2 text-white font-semibold hover:text-white-500 hover:bg-blue-500 transition duration-300" <?php e($item->isOpen(), 'aria-current ') ?> href="<?= $item->url() ?>"><?= $item->title()->html() ?></a>
<?php endforeach ?>
</div>
</div>
<!-- This is a search component -->
<ul class="flex items-center ml-auto space-x-1">
<div class="md:flex hidden items-center ml-auto bg-blue-800 space-x-1 pr-4">
<form method="post" action="<?= page('search')->url() ?>">
<div class="relative text-gray-600 focus-within:text-gray-800">
<span class="absolute inset-y-0 left-0 flex items-center pl-2">
<button type="submit" class="p-1 focus:outline-none focus:shadow-outline">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-6 h-6"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</button>
</span>
<input type="search" name="q" class="py-2 text-sm text-gray-900 bg-white rounded-md pl-10 focus:outline-none focus:bg-white focus:text-gray-900" placeholder="Suche..." value="<?php echo (!empty($query)) ? esc($query) : '' ?>" autocomplete="off">
</div>
</form>
</div>
<!-- Language selector -->
<?php foreach($kirby->languages()->not($kirby->language()) as $language): ?>
<?php if ($page->translation($language->code())->exists()): ?>
<?= svg('assets/icons/OOjs_UI_icon_language-ltr-invert.svg') ?>
<li <?php e($kirby->language() == $language, ' class="active text-white"') ?>>
<a href="<?= $page->url($language->code()) ?>" hreflang="<?php echo $language->code() ?>" class="text-white">
<?= html($language->name()) ?>
</a>
</li>
<?php endif ?>
<?php endforeach ?>
</ul>
<!-- Social Navbar items -->
<div class="group hidden md:flex">
<button
class="outline-none focus:outline-none px-3 py-1 bg-blue-800 text-white rounded-sm flex items-center min-w-32"
>
<span class="pr-1 font-semibold flex-1">Folgen</span>
<span>
<svg
class="fill-current h-4 w-4 transform group-hover:-rotate-180
transition duration-150 ease-in-out"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
>
<path
d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
/>
</svg>
</span>
</button>
<ul
class="bg-gray-200 inline-flex transform scale-0 group-hover:scale-100 absolute transition duration-150 ease-in-out origin-top top-full right-0 left-auto"
>
<li class="items-center inline-flex py-2"><?php snippet('social') ?></li>
</ul>
</div>
<!-- Mobile menu button -->
<div class="md:hidden flex ml-4 items-center">
<button class="outline-none mobile-menu-button" aria-label="Navigation icon">
<svg class=" w-7 h-7 text-white hover:text-blue-500 "
x-show="!showMenu"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
</div>
</div>
<!-- mobile menu -->
<div class="hidden mobile-menu text-center bg-blue-600">
<ul class="inline-block">
<?php foreach ($site->children()->listed() as $item): ?>
<li><a class="block px-2 py-4 text-white hover:bg-blue-500 transition duration-300" <?php e($item->isOpen(), 'aria-current ') ?> href="<?= $item->url() ?>"><?= $item->title()->html() ?></a></li>
<?php endforeach ?>
<div class="inline-flex px-2 py-4">
<form method="post" action="<?= page('search')->url() ?>">
<div class="relative text-gray-600 focus-within:text-gray-800">
<span class="absolute inset-y-0 left-0 flex items-center pl-2">
<button type="submit" class="p-1 focus:outline-none focus:shadow-outline">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-6 h-6"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</button>
</span>
<input type="search" name="q" class="py-2 text-sm text-gray-900 bg-white rounded-md pl-10 focus:outline-none focus:bg-white focus:text-gray-900" placeholder="Suche..." value="<?php echo (!empty($query)) ? esc($query) : '' ?>">
</div>
</form>
</div>
<div class="inline-flex px-2 py-4 text-white filter invert"><?php snippet('social') ?></div>
</ul>
</div>
<script>
const btn = document.querySelector("button.mobile-menu-button");
const menu = document.querySelector(".mobile-menu");
btn.addEventListener("click", () => {
menu.classList.toggle("hidden");
});
</script>
</nav>
You can find a working example over here.

Answer 1

You can add relative class on the container which contains the button and the dropdown. Your dropdown, which has the right-0 class, will then be positioned on the right edge of the container instead of the browser window like it is now. Working example here.