Dropdown appendToBody

Expected behavior Clicking the button for a dropdown shows the menu

Actual behavior If container of dropdown is not tall enough to show the menu, the menu doesn't show. Appending the menu to the body (like Autocomplete) would allow the menu to float above the container

Resources (screenshots, code snippets etc.)

<div class="row" >   <--  have to add a height here to have the menu show when the button is clicked, but it messes up my page layout -->
    <div class="container-fluid">
        <div class="row">
            <div mdbDropdown class="dropdown btn-group">
                <button
                    mdbDropdownToggle
                    mdbBtn
                    class="dropdown-toggle waves-light"
                    type="button"
                    placement="top">
                    Add Address Field
                </button>
                <div class="dropdown-menu dropdown-primary">
                    <a class="dropdown-item" href="#"> Country</a>
                    <a class="dropdown-item" href="#">City</a>
                    <a class="dropdown-item" href="#">Street</a>
                    <a class="dropdown-item" href="#">State/Province</a>
                    <a class="dropdown-item" href="#">County</a>
                    <a class="dropdown-item" href="#">Municipality</a>
                    <a class="dropdown-item" href="#">Town</a>
                    <a class="dropdown-item" href="#">District</a>
                    <a class="dropdown-item" href="#">Region</a>
                    <a class="dropdown-item" href="#">Township</a>
                    <a class="dropdown-item" href="#">Village</a>
                    <a class="dropdown-item" href="#">Borough</a>
                    <a class="dropdown-item" href="#">Precinct</a>
                    <a class="dropdown-item" href="#">Ward</a>
                    <a class="dropdown-item" href="#">Postal Code</a>
                    <a class="dropdown-item" href="#">Religious Parish</a>
                    <a class="dropdown-item" href="#">Civil Parish</a>
                    <a class="dropdown-item" href="#">Farm</a>
                    <a class="dropdown-item" href="#">Estate</a>
                    <a class="dropdown-item" href="#">Building</a>
                    <a class="dropdown-item" href="#">GPS</a>
                    <a class="dropdown-item" href="#">Other</a>
                </div>
            </div>
        </div>
    </div>
</div>