CSS Overflow: auto squeezes content into container instead of adding scrollbar?

I have a div with class name graph-container with the following properties:

.graph-container{
    width: 90%;
    height: 298px;
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

and in that div, among other things, I have another div with the class graph-selector which contains a list of buttons:

.graph-selector{
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
    width: 320px;
    margin-top: 46px;
    overflow-y: auto;
    overflow-x: hidden;
}

Depending on the graph, it can have a few, or a lot of buttons, so I set the vertical overflow property to add a scrollbar whenever they would extend the size of the container div. However for some reason this just made the buttons thinner than their set height to be able to be squeezed into the container div without any scrollbar appearing, which is... literally the opposite of what I just asked it?

You can prevent shrink by adding flex-shrink: 0 to the buttons [MDN].

.graph-container {
  width: 90%;
  height: 50px;
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.graph-selector {
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 100%;
  width: 320px;
  margin-top: 46px;
  overflow-y: auto;
  overflow-x: hidden;
}

.graph-selector-btn {
  height: 40px;
  flex-shrink: 0;
}

<div class="graph-container">
  <div class="graph-selector">
    <button class="graph-selector-btn">Button 1</button>
    <button class="graph-selector-btn">Button 2</button>
    <button class="graph-selector-btn">Button 3</button>
  </div>
</div>