Stop flexbox from expanding, instead add scrollbar

Question

I have a website that looks something like this: https://codepen.io/Username123T/pen/GRvwmoq

HTML code

<body>
  <div class="App">

    <div class="Nav"></div>
    <div class="MainPage">

      <div class="Sidebar">

        <div class="LinksToOtherMessagesFromUser">

        </div>

      </div>
      <div class="Message"></div>

    </div>
  </div>

</body>

CSS code

.App {
  background-color: black;
  display: flex;
  flex-direction: column;
  flex: 1;
}
    
.Nav {
  flex: 1;
}
    
.MainPage {
  display: flex;
  flex: 1;
  background-color: turquoise;
}
    
.Sidebar {
  flex: 1;
  background-color: thistle;
  display: flex;
}
    
.LinksToOtherMessagesFromUser {
  margin: 3vh;
  flex: 1;
  background-color: blue;
  overflow: auto;
}
    
.Message {
  background-color: violet;
  flex: 1;
}
    
body {
  height: 100vh;
  display: flex;
  flex-direction: row;
}

And when i add Content that is bigger than the box, it should add a Scroll bar. But instead it just expands like this: https://codepen.io/Username123T/pen/PoKxmGW

<body>
  <div class="App">
    <div class="Nav"></div>
    <div class="MainPage">
      <div class="Sidebar">
        <div class="LinksToOtherMessagesFromUser">
          <p>Message 1</p>
          <p>Message 2</p>
          <p>Message 3</p>
          <p>Message 4</p>
          <p>Message 5</p>
          <p>Message 6</p>
          <p>Message 7</p>
          <p>Message 8</p>
        </div>
      </div>
      <div class="Message"></div>
    </div>
  </div>
</body>

I would prefer not to set a max-height, or only if it is relativ to its parent (Sidebar).

Any help is welcome, thanks in advance.

I took a look at the link that was the reason why my question got closed: One flex/grid item sets the size limit for siblings

But i am not quite sure how this is supposed to help me. I added

flex-basis: 0px;
flex-grow: 1;

https://codepen.io/Username123T/pen/oNeQevd

to the sibling (Input) but it doesn't do anything... Did i miss anything?

If you want to have a scrollbar to prevent the box from expanding, why don't you want to use a max-height? — Ryan Millares, Nov 19 '21 at 22:10
I guess i can do that, but then I need to set a max-height for every parent as well. Because i can set the max height relativ to the parent only if the parent also has a max height. I just assumed there must be a keyword or something that tells my flexbox that it isnt allowed to grow, without having to set a max-height. But if there isnt I will just do it with max-height i guess, its just mildly inconvenient. It just seemed to me there must be a other way, but seemingly there isnt. — Timon, Nov 20 '21 at 10:30
i think you should set "height" and "max-height" on the same value. — Devolux, Nov 23 '21 at 09:37

score 1 · Answer 1 · answered Nov 19 '21 at 22:17

1

If you want to use scrollbar to stop the box from expanding, and are willing to use a max-height as long as it is relative to the parent div, try adding:

overflow-y: scroll;
max-height: 80%;

to the child div containing your

items. The % value can be any number from 0-100, representing that percent of the height of the parent div. In this case, it will set the child div's max height to 80% of the parent div's height, then use a scrollbar to cover overflow in the y-direction.

answered Nov 19 '21 at 22:17

Ryan Millares

525
4
16

I tried this, but this only works when the parent has a height set explicitly, which isnt the case here. https://stackoverflow.com/questions/14262938/child-with-max-height-100-overflows-parent – Timon Nov 19 '21 at 23:39

Stop flexbox from expanding, instead add scrollbar

1 Answers1