'Bootstrap dropdown with min-width: auto as flex child

There was a need to set a min-width: auto for the .dropdown-menu in Bootstrap dropdown, this works until I put the dropdown in a flex element like

<div class="d-flex">
<div class="dropdown">
    <a href="#" class="dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu" style="min-width:auto;">
        <li>
            <a class="dropdown-item d-flex align-items-center" href="#">
                <img class="me-3" src="assets/img/icons/flags/us.png" alt="">
                English
            </a>
        </li>
        <li>
            <a class="dropdown-item d-flex align-items-center" href="#">
                <img class="me-3" src="assets/img/icons/flags/es.png" alt="">
                Spanish
            </a>
        </li>
    </ul>                                            
</div>
</div>

Here is the result with broken padding, and schematic view of flex element:

dropdown with bug schematic view

I want my dropdown menu have right padding

htmlcsstwitter-bootstrapflexboxdropdown


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions