Buttons Are Not Being Hidden by Overflow

Question

I am coding a simple bar register program.

I've listed my drinks as buttons in a container div.

However, the list of buttons go over the container div and the overflow is not being hidden.

Here is the Javascript I have below. What am I missing to make the buttons be hidden when listed in the div?

 let drinklistcontainer = document.createElement ('div')
    drinklistcontainer.style.position = 'fixed'
    drinklistcontainer.style.margin = "auto"
    drinklistcontainer.style.width = '46%'
    drinklistcontainer.style.height = '39%'
    drinklistcontainer.style.right = '1.6%'
    drinklistcontainer.style.border = "thin solid red"
    drinklistcontainer.style.bottom = "53%"
    drinklistcontainer.style.display = "block"
    drinklistcontainer.style.overflow = "scroll"
    infoview2.appendChild(drinklistcontainer)

    for (drink in DrinkList){
        let listeddrink = document.createElement ("button");
        listeddrink.style.position = 'fixed'
        listeddrink.style.margin = "auto"
        listeddrink.style.width = '44.7%'
        listeddrink.style.height = '5%'
        listeddrink.style.float = "left"
        listeddrink.style.bottom = bottomnumber + "%" //higher number = up, lower numbers = down
        let text = (DrinkList[drink][0] + " - Price:" + DrinkList[drink][2] + " - Qty:" + DrinkList[drink][3])
        listeddrink.innerHTML = text
        listeddrink.style.textAlign = "center"
        drinklistcontainer.appendChild(listeddrink)

        bottomnumber -= 5
    }

Answer 1

Never mind. It's because the buttons themselves had a position of "fixed", and overflow will not work with that.