How to Combine Flexbox and Vertical Scroll in a Full-Height App

How can I combine flexbox and vertical scroll in a full-height app?

Thanks to https://stackoverflow.com/users/1652962/cimmanon that gave me the answer.

The solution is setting a height to the vertical scrollable element. For example:

#container article {
    flex: 1 1 auto;
    overflow-y: auto;
    height: 0px;
}

The element will have height because flexbox recalculates it unless you want a min-height so you can use height: 100px; that it is exactly the same as: min-height: 100px;

#container article {
    flex: 1 1 auto;
    overflow-y: auto;
    height: 100px; /* == min-height: 100px*/
}

So the best solution if you want a min-height in the vertical scroll:

#container article {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 100px;
}

If you just want full vertical scroll in case there is no enough space to see the article:

#container article {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0px;
}

The final code: http://jsfiddle.net/ch7n6/867/

How to get overflow scrollbar on flexbox layout

Issue is with property justifyContent="flex-end" your stack.

<Stack
            direction="column"
            spacing={1}
            p={2}
            justifyContent="flex-end"
            sx={{ flexGrow: 1, overflowY: "auto", height: 0 }}
          >

Solution

You can replace that property with direction="column-reverse". Since, it's a chat application. You can use unshift to append messages to starting.

Alternate solution:

You can keep the direction as direction="column". Have a JS function which would at regular intervals check that div and scroll the content to bottom

function scrollToBottom(){
    var element = document.getElementById("yourDiv");
    element.scrollTop = element.scrollHeight;
}
//checking every 1sec

window.setInterval(scrollToBottom, 1000)

Flexbox combined with vertical overflow is not working correctly

I've figured this out myself, partially thanks to @mdurchholz above, but it was the .card-main-content itself that was overflowing, not the .transaction-lines. The child element (.card-main-content) to the parent you've set the height on (.test-card), is the one that needs the overflow property and not one of it's children.

To resolve this, I had to make the .content-container a direct child of the .test-card and then apply the overflow proprety there. Added flex: 1 to the .content-container, so it would stretch the remaining vertical space of the .test-card. If you have a lot of content in the .content-container, scrolling will now activate, without moving any of the other content, which is exactly what I needed.

Flexbox wasn't relevant to this issue.

Thanks and I hope this is helpful to someone in the future.

CSS3 Flexbox full-height app and overflow

I can't say for sure if that's a browser bug or if it is in fact how the flex model is supposed to work. If that is how it should work I'd agree that's not exactly intuitive!

I found a work around by wrapping the lists in an absolutely positioned div with the overflow set to auto. This allows the flex boxes to maintain their original states and only change when the entire layout is recalculated vs. the content changing.

Here's the updated markup:

<section id="folders">
   <div class="dynamicList">
   <h2>Folders</h2> 
   <ul>
      <li>Folder 1</li>
      <li>Folder 2</li>
   </ul> 
   <a href="#" id="add">Add Folder</a>
   </div>      
</section>

And the updated CSS:

#left #tasks,
#left #folders {
  position: relative;
}

.dynamicList {
  bottom: 0;
  left: 0;
  overflow: auto;
  position: absolute;
  right: 0;
  top: 0;
}

I forked your fiddle here to demo:
http://jsfiddle.net/MUWhy/4/

UPDATE:

If you want the headings to remain fixed and only have the contents of the folder and tasks lists scroll, then I would consider putting the headings and the add buttons in their own fixed-height boxes within the #left div. It's a bit more mark up but still pretty simple. I haven't tried it on JSFiddle but I think that would be the best route to go.

How can I get overflow:scroll inside a flex box

I kept on searching after posting this question and I found this post: Flexbox and vertical scroll in a full-height app using NEWER flexbox api

It suggested setting the parent elements height to 0.
I tried it and it seems to be working :D

Forcing sidebar scroll using flexbox layout

Add overflow-y: auto;, this will solve your problem.

Weird flex wrap positioning with vertical scroll

New CSS.
Now everything is as the author wanted, no distance between cards.

.main {
  display: flex;
  flex-direction: column;
/*justify-content: space-between;*/
  height: 100%;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  margin: 1rem; 
/*height:70vh*/
  overflow-y: scroll;
}

.bottom-bar{
 margin-top:auto
}