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

Question

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?

Can you clarify if the class .graph-selector is inside the .graph-container class, if so, remove the height property 100% in .graph-selector — Mukilan
– Mukilan, Commented Feb 27 at 10:53
Yes, I literally said it's inside. Removing the height property just makes the inner div spill on the content above and under, still without a scrollbar... — user28751094
– user28751094, Commented Feb 27 at 11:52

OverSamu · Accepted Answer · 2025-02-27 10:55:00Z

2

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>

answered Feb 27 at 10:55

OverSamu

12012 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related