Как сделать чтобы список открывался наверх, а не вниз?

function OrderSellDropDown(elem)
{   
    let id = elem.id.split(":")[1];
    document.getElementById(`OrderDropDown:${id}`).classList.toggle("show");
    var table = document.getElementById(active_sell_tab + "_orders");

}

window.onclick = function(event) {
    if (!event.target.matches('.order_button')) {
  
      var dropdowns = document.getElementsByClassName("dropdown-content");
      var i;

      for (i = 0; i < dropdowns.length; i++) {
        var openDropdown = dropdowns[i];
        if (openDropdown.classList.contains('show')) {
          openDropdown.classList.remove('show');
        }
      }
    }
}

.order_button
{
    width: 100%;
    height: 100%;
    padding: 3px 5px;
    background-color: #1B2431;
    border: none;
    color: #f2f2f2;
    border-radius: 3px;
    font-family: 'Montserrat', sans-serif;
}

.dropdown {
    position: relative;
    display: inline-block;
    left: 0;
    width: 90%
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #FFFFFF;
    width: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
   
}

.dropdown-content a {
    color: black !important;
    padding: 5px 15px;
    text-decoration: none;
    display: block;
    font-family: 'Montserrat', sans-serif;
    text-align: left;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    top: auto;
    bottom: 100%;
}

.dropdown-content a:hover {background-color: #ddd; text-decoration: none;}

.show {display:block;}

<div class="dropdown">
                                <button class="order_button" id="OrderButton:${claim.id}" onclick="OrderSellDropDown(this)">Действия <i class="fa fa-caret-down"></i></button>
                                <div id="OrderDropDown:${claim.id}" class="dropdown-content">
                                    <a onclick="delete_claim(${claim.id})">Удалить</a>
                                </div>
                            <div>