overflow: scroll on div with flex: 1 without specific height

Question

I have a flexbox layout kinda like Discord. My list is the messageList with all messages I have. I want to add overflow-y: scroll to it but it doesn't work because I don't have a specific height. Also, I don't want to add a specific height because it should be dynamic.

My solution would be.

max-height: calc(100vh - header.height - send.height)

but it only works if you have specific heights for header and send tho.

is there any other way?

example: https://jsfiddle.net/AvaPLaIN/b7umpgzn/44/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  border: 2px solid black;
}

.header {
  width: 100%;
  border: 2px solid red;
  min-height: 3rem;
}

.content {
  flex: 1;
  display: flex;
  border: 2px solid green;
}

.chatbox {
  flex: 1;
  border: 2px solid yellow;
  display: flex;
  flex-direction: column;
}

.members {
  width: 15rem;
  border: 2px solid blue;
}

.list {
  flex: 1;
  border: 2px solid grey;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  overflow-y: scroll;
}

li {
  width: 100%;
  border: 1px solid black;
}

.send {
  height: 5rem;
  border: 2px solid purple;
}


  
    Header here
  
  
    
      
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
      
      
        Send Message here
      
    
    
      Memberlist here

user_15924950 · Answer

Just use flex: 1 1 0 instead of flex: 1 in .list.

The problem is related to flex-basis property and flex: 1 shorthand.

flex-basis: 0px and flex-basis: 0% have different results in some cases. Here is an answer to explain the problem: https://stackoverflow.com/a/63475286/15924950

Also, I made a simple demo to show how difference between flex-basis: 0px and flex-basis: 0%: https://codepen.io/shadow-mike/pen/NWpNVvv

user_17467669 · Answer

This is a solid layout for dynamic scrolling section using mostly flexbox and grid. Run 'full page' in snippet. Obviously you would need media queries to adjust for mobile.

 body {
      font-family: sans-serif;
    }

    .container {
      display: flex;
      flex-direction: row;
      position: absolute;
      top: 50px;
      right: 0;
      bottom: 0;
      left: 0;

    }

    header {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 50px;
      color: #fff;
      background: #40B6C0;

    }

    .column-1 {
      grid-template-columns: auto auto;
      flex-direction: column;
      grid-gap: 0;
      width: 30%;
      flex-grow: 1;
      flex-direction: column;

    }

    .column-1 div {
      height: 50%;
      width: 100%;
    }


    .column-2 {
      background: #FF5C5C;
      width: 70%;
      display: flex;
      background: white;
      flex-grow: 1;
      overflow-y: scroll;
      flex-direction: column;

    }

    .column-2 ul {
      padding: 24px;
    }

    .column-2 li {
      list-style: none;
      padding: 12px 0;
      border-bottom: 1px solid #EAEEF1;
    }

    .column-2 footer {
      position: sticky;
      bottom: 0;
      background: #FF6F6F;
      color: #fff;
      padding: 24px;

    }

    #cell-1 {
      background: #2689B9;
    }

    #cell-2 {
      background: #8383C3;
    }





  
  






  
    This is your header
  
  

    
      Memberlist here
      Other Stuff Here
    

    
      
        
          They're not aliens, they're Earth…liens!
        No… It's a thing; it's like a plan, but with more greatness. No… It's a thing; it's like a plan, but with
          more
          greatness. All I've got to do is pass as an ordinary human being. Simple. What could possibly go wrong?

        It's art! A statement on modern society, 'Oh Ain't Modern Society Awful?'!
        Heh-haa! Super squeaky bum time!
        Sorry, checking all the water in this area; there's an escaped fish.
        You hit me with a cricket bat.
        You hit me with a cricket bat. They're not aliens, they're Earth…liens! Aw, you're all Mr. Grumpy Face
          today.
          Father Christmas. Santa Claus. Or as I've always known him: Jeff.

        I'm the Doctor. Well, they call me the Doctor. I don't know why. I call me the Doctor too. I still don't
          know
          why.
        Sorry, checking all the water in this area; there's an escaped fish.
        I am the last of my species, and I know how that weighs on the heart so don't lie to me!
        You know when grown-ups tell you 'everything's going to be fine' and you think they're probably lying to
          make
          you feel better? I'm nobody's taxi service; I'm not gonna be there to catch you every time you feel like
          jumping
          out of a spaceship.

        Annihilate? No. No violence. I won't stand for it. Not now, not ever, do you understand me?! I'm the Doctor,
          the Oncoming Storm - and you basically meant beat them in a football match, didn't you? The way I see it,
          every
          life is a pile of good things and bad things.…hey.…the good things don't always soften the bad things; but
          vice-versa the bad things don't necessarily spoil the good things and make them unimportant.

        It's a fez. I wear a fez now. Fezes are cool. The way I see it, every life is a pile of good things and bad
          things.…hey.…the good things don't always soften the bad things; but vice-versa the bad things don't
          necessarily
          spoil the good things and make them unimportant.

        *Insistently* Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do! They're not
          aliens, they're Earth…liens! Annihilate? No. No violence. I won't stand for it. Not now, not ever, do you
          understand me?! I'm the Doctor, the Oncoming Storm - and you basically meant beat them in a football match,
          didn't you?

        It's a fez. I wear a fez now. Fezes are cool. I am the last of my species, and I know how that weighs on the
          heart so don't lie to me! Heh-haa! Super squeaky bum time! No, I'll fix it. I'm good at fixing rot. Call me
          the
          Rotmeister. No, I'm the Doctor. Don't call me the Rotmeister.

        I'm the Doctor. Well, they call me the Doctor. I don't know why. I call me the Doctor too. I still don't
          know
          why. No, I'll fix it. I'm good at fixing rot. Call me the Rotmeister. No, I'm the Doctor. Don't call me the
          Rotmeister.

        Stop talking, brain thinking. Hush. *Insistently* Bow ties are cool! Come on Amy, I'm a normal bloke, tell
          me
          what normal blokes do! Annihilate? No. No violence. I won't stand for it. Not now, not ever, do you understand
          me?! I'm the Doctor, the Oncoming Storm - and you basically meant beat them in a football match, didn't you?
        

        You hit me with a cricket bat. Stop talking, brain thinking. Hush. Annihilate? No. No violence. I won't
          stand
          for it. Not now, not ever, do you understand me?! I'm the Doctor, the Oncoming Storm - and you basically meant
          beat them in a football match, didn't you?

        Saving the world with meals on wheels. Annihilate? No. No violence. I won't stand for it. Not now, not ever,
          do you understand me?! I'm the Doctor, the Oncoming Storm - and you basically meant beat them in a football
          match, didn't you?

        They're not aliens, they're Earth…liens! Heh-haa! Super squeaky bum time! *Insistently* Bow ties are cool!
          Come on Amy, I'm a normal bloke, tell me what normal blokes do! Stop talking, brain thinking. Hush.

        You know how I sometimes have really brilliant ideas? Annihilate? No. No violence. I won't stand for it. Not
          now, not ever, do you understand me?! I'm the Doctor, the Oncoming Storm - and you basically meant beat them
          in
          a football match, didn't you?
      

      type your message here

overflow: scroll on div with flex: 1 without specific height

2 Answers