Can't overflow: scroll internal div in flexbox

Question

I'm trying to prevent a flexbox child from overflowing it's container, but using overflow:auto on a child div doesn't seem to work.

My basic setup: I have a flexbox container with 2 divs, A and B. The A div has 2 internal divs, A1 and A2, and the B div only has one internal div B1. I'm trying to keep A1 and B1 static, and show a scrollbar on A2 when it overflows.

html:

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

css

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

.A {
  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, 1, auto;
  overflow: auto;
  height: 800px;
}

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

enter image description here

Here's a code example: https://codepen.io/guybarn/pen/QWvWVMb

Suryansh Singh · Accepted Answer · 2021-06-30 13:04:42Z

5

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>

edited Jun 30, 2021 at 13:04

answered Jun 29, 2021 at 17:34

Suryansh Singh

1,1939 silver badges16 bronze badges

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

2 Comments

Guy Barner Over a year ago

Thanks a lot! I understand the solution and it makes sense, but my issue is that I don't know the height of A2, since B1 is also slightly dynamic according to the screen dimensions. I'd like A1 and B1 to take all the space they need, and for A2 to take the remaining space.

Suryansh Singh Over a year ago

@GuyBarner My bad I didn't understood the main point you were trying to make So I edited my answer with new solution.

Collectives™ on Stack Overflow

Can't overflow: scroll internal div in flexbox

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related