angular ng-bootstrap dropdown z-index and overflow

Question

I am working on a board with columns. the inner items of the column require a bootstrap dropdown. The issue I am having is that the dropdown container is causing an overflow. I need to be able to z-index it above the column container so that it does not overflow. I see in the github repo there is an issue open to have and append to body feature like they have with the popovers and tooltips, but it seems unresolved. Can anyone suggest a solution?

template:

<div class="board-container">
    <div class="board-column" *ngFor="let column of columns">
        <div class="board-heading">
            {{ column.name }}
            <span class="count">{{ column.items.length }}</span>
        </div>
        <div id="{{ column.id }}"
            class="board-body h-100"
            (onDrop)="onItemDrop($event)"
            droppable>
            <div class="card bg-light-blue mb-2"
                *ngFor="let item of column.items"
                [dragEnabled]="true"
                [dragData]="item"
                draggable>
                <div class="card-body">
                    <div class="card-title mb-0">
                        <h6>
                            <span class="text-primary">{{ item.contactName }}</span><br>
                            <span class="text-secondary">{{ item.mediaOutletName }}</span>
                        </h6>
                        <div ngbDropdown>
                            <button
                                class="btn btn-transparent"
                                id="columnSelect"
                                ngbDropdownToggle>
                            </button>
                            <div ngbDropdownMenu aria-labelledby="columnSelect">
                                <button class="dropdown-item">Action - 1</button>
                                <button class="dropdown-item">Action - 2</button>
                            </div>
                        </div>
                    </div>
                    <div class="card-text text-dark">
                        Sent: {{ item.updatedDate | date }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

scss/css for the columns:

app-funnel-grid {
    padding: 0 2rem 2rem;
    overflow-x: auto;
    height: 100%;
    .board-container {
        align-items: stretch;
        background-color: white;
        display: inline-flex;
        flex-direction: row;
        justify-content: flex-start;
        padding: 0 .5rem;
        height: 100%;
        .board-column {
            border-right: 1px solid $gray-300;
            display: flex;
            flex-direction: column;
            max-height: 100%;
            min-width: 260px;
            &:last-of-type {
                border-right: none;
            }
        }
    }
}

.board-heading {
    color: $secondary;
    display: flex;
    padding: .5rem;
    border-bottom: 1px solid $gray-300;
    .count {
        border: 1px dotted;
        border-radius: 100%;
        display: inline-block;
        font-size: .85rem;
        margin-left: auto;
        width: 1.5rem;
        height: 1.5rem;
        line-height: 1.5rem;
        text-align: center;
    }
};
.board-body {
    max-height: 100%;
    overflow-y: auto;
    padding: .5rem;
    .card {
        border: none;
        .card-body {
            .card-title {
                display: flex;
                align-items: start;
                justify-content: space-between;
            }
        }
    }
}

.board-body {
    &.drag-over-border {
        .card {
            display: none;
        }
    }
}

.drag-handle {
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

.drag-handle:active {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

.drag-over-border {
    border: $green solid 1px;
}

screen shot of the issue