Scrolling a Flexbox With Overflowing Content

Scrolling a flexbox with overflowing content

I've spoken to Tab Atkins (author of the flexbox spec) about this, and this is what we came up with:

HTML:

<div class="content">
    <div class="box">
        <div class="column">Column 1</div>
        <div class="column">Column 2</div>
        <div class="column">Column 3</div>
    </div>
</div>

CSS:

.content {
    flex: 1;
    display: flex;
    overflow: auto;
}

.box {
    display: flex;
    min-height: min-content; /* needs vendor prefixes */
}

Here are the pens:

Short columns being stretched.
Longer columns overflowing and scrolling.

The reason this works is because align-items: stretch doesn't shrink its items if they have an intrinsic height, which is accomplished here by min-content.

Can't overflow: scroll internal div in flexbox

If you want scroll A2 then it should be A2 which is overflowed. But in your case you are overflowing .wrap. As you set A2 as height:800px; and A as flex:0, 0, auto; ,so your A class div expand which as a result overflows your .wrap which is height:400px;.

So what you need is to set a fixed height and add overflow-y:scroll for A2 where height should be compatible with height of wrap so it does not get overflowed and add scrollbar to your A2 when your content inside A2 gets overflowed. Following should better represent your what you need:

Edit: Since i misunderstood the question, so here is edit with better solution.
As I already mentioned that overflow is result of height of children more than than the parent container. In this particular case as A2 has height which overflow its parent A which in result overflows .wrap.

Solution is min-height: 0; (or some actual value). We add this to flex children Otherwise the flex child containing the other elements won’t narrow past the “implied height” of those elements.

So all we have to do is to set min-height:0 (or some other value) to A. And set min-height:0 (or some other value) and overflow-y:scroll; to class A2. Here if you need more info or similar example.

.wrap {
  display: flex;
  flex-direction: column;
  height: 200px;
  justify-content: space-between;
  background-color: gray;
  }

.A {
  min-height:0;
  display: flex;
  flex-direction: column;
  flex: 1, 1, auto;
}

.B {
  display: flex;
  flex-direction: column;
  flex: 0, 0, auto;
}

.A1 {
  background-color: yellow;
  flex: 0, 0, auto;
}

.A2 {
  background-color: green;
  flex: 1;
  min-height:0;
  overflow-y:scroll;
}

.B1 {
    background-color: blue;
    flex: 0, 0, auto;
    
}

<div class="wrap">
  <div class="A">
    <div class="A1">
      <div>A1</div>
      <div>A1</div>
    </div>
    <div class="A2">
      <div>A2</div>
      <div>A2</div>
      <div>A2</div>
      <div>A2</div>
      <div>A2</div>
      <div>A2</div>
      <div>A2</div>
      <div>A2</div>
      <div>A2</div>
      <div>A2</div>
      <div>A2</div>
      <div>A2</div>
      <div>A2</div>
    </div>
  </div>
  <div class="B">
    <div class="B1">
      <div>B1</div>
      <div>B1</div>
     </div>
   </div>
</div>

Flexbox scroll overflowing content in an dynamic sized parent

you are missing

an height on .main to size it according to body or the viewport's height.
overflow on .content, so it overflows, unless you want .main to overflow (which body does already)
and finally flex-shrink:0; on .segment so it doesn't shrink :)

here an example of what i understood you were after:

function toggleMenu() {
      const menu = document.querySelector(".menu");
      if(menu.classList.contains("open")) {
        menu.querySelector(".text").innerHTML = "<p> small text </p>";
        menu.classList.remove("open");
      }else {
        menu.querySelector(".text").innerHTML = "<h1> im the menu </h1>";
        menu.classList.add("open");
      }
    }

body {
      padding: 0;
      margin: 0;
      background-color: #17141d;
      display: flex;
      height: 100vh;
    }

    .main {
      display: flex;
      flex-direction: column;
      flex: 1;
      background-color: grey;
      max-height;100%;
    }

    .menu {
      background-color: blueviolet;
    }

    .content {
      display: flex;
      flex: 1;
      background-color: aqua;
      overflow:auto;
    }

    .segment-wrapper {
      flex: 1;
      display: flex;
      background-color: red;
      flex-direction: column;
      overflow-y: scroll;
      padding: 10px;
      box-sizing: border-box;
    }

    .segment {
    flex-shrink:0;
      height: 500px;
      background-color: green;
      border-radius: 5px;
      border: solid 1px black;
      width: 100%;
      margin-bottom: 10px;
    }

<div class="main">
    <div class="menu open">
      <div class="text"><h1>im the menu</h1></div>
      <button onclick="toggleMenu()">Toggle</button>
    </div>
    <div class="content">
      <div class="segment-wrapper">
        <div class="segment">

        </div>
        <div class="segment">

        </div>
        <div class="segment">

        </div>
      </div>
    </div>
  </div>

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

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)

Full page with nested flexbox and scrolling

I got this after a bit of tweaking:

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

.page {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.topbar {
  background-color: lightgreen;
}

.vcontainer {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  min-height: 0;
}

.sidebar {
  overflow-y: auto;
  background-color: yellow;
}

.content {
  flex-grow: 1;
  overflow: auto;
  background-color: lightblue;
}

.footer {
  background-color: pink;
}

.contentcontainer {
  height: 100%;
}

.contentsub {
  max-height: max(40%, 2rem);
  margin: 1rem;
  overflow-y: scroll;
  background-color: orange;
}

<div class="page">
  <nav class="topbar">
    top bar
  </nav>
  <div class="vcontainer">
    <nav class="sidebar">
      side<br/>side<br/>side
    </nav>
    <main class="content">
      <div class="contentcontainer">
        <div>
          some additional heading content
        </div>
        <div class="contentsub">
          <p>some actual content</p>
          <p>some actual content</p>
          <p>some actual content</p>
          <p>some actual content</p>
          <p>some actual content</p>
          <p>some actual content</p>
          <p>some actual content</p>
          <p>some actual content</p>
          <p>some actual content</p>
          <p>some actual content</p>
          <p>some actual content</p>
          <p>some actual content</p>
          <p>some actual content</p>
          <p>some actual content</p>
          <p>some actual content</p>
          <p>some actual content</p>
          <p>some actual content</p>
          <p>some actual content</p>
          <p>some actual content</p>
          <p>some actual content</p>
          <p>some actual content</p>
          <p>some actual content</p>
          <p>some actual content</p>
          <p>some actual content</p>
          <p>some actual content</p>
          <p>some actual content</p>
          <p>some actual content</p>
        </div>
        <div>
          some additional footer content
        </div>
      </div>
    </main>
  </div>
  <footer class="footer">
    footer
  </footer>
</div>

Displaying overflow scroll bar on a column flexbox

Give the container .flex-items a fixed height or max-height, overflow only works if the content of a container exceeds the height of the container

.flex-items {
  flex: 1;
  display: flex;
  height: 500px // specify a height
  min-height: 100%; // take up the full height of its own container
  overflow: auto;
  flex-direction: column;
}

How do I fix scrolling when flexbox content is vertically centered?

align-items: safe center should avoid children to go off the box .

https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

safe
Used alongside an alignment keyword. If the chosen keyword means that the item overflows the alignment container causing data loss, the item is instead aligned as if the alignment mode were start.

html, body {
    height: 100%;
}
body {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    overflow: hidden;
}
.container {
    overflow-y: auto;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: safe center;
}

.content {
    border: 1px solid grey;
    background-color: lightgrey;
    padding: 10px;
    margin: 10px;
    border-radius: 10px;
}

<div class="container">
    <div class="content">
        Start of the content
        <br />
        <br />
        Middle of the content
        <br />
        <br />
        End of the content
    </div>
</div>
<div class="container">
    <div class="content">
        Start of the content :(((
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        Middle of the content
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        End of the content
    </div>
</div>

CSS: flexbox horizontal overflow

If the flex-container has flex-wrap:no-wrap (default), then setting it to overflow:auto; and the flex-items to flex: 0 0 100% (or whatever your desired width instead of 100%) should be enough.

section{  display:flex;  width:100%;  overflow:auto;}
div{  background-color:chartreuse;  height:2rem;  flex: 0 0 100%;  box-sizing:border-box;  border:5px solid red;}

<section>  <div></div>  <div></div>  <div></div>  <div></div>  </section>

Scrolling a Flexbox With Overflowing Content