IE11 flex item overflow vertically

Question

I'm aware of there are many flex item overflow in IE questions here, however I couldn't find the solution for the vertically overflow answer.

If you run in Chrome, you will see the content scroll vertically with an internal scroll, it respect the max-height of the parent. (expected)

However if you run in IE 11, it overflows instead of creating an internal scroll.

any idea?

Edit: A little of context, I'm trying to create a modal where the dialog has auto height and grow until the max-height then set internal scroll in body. something similar to https://material-ui.com/demos/dialogs/#scrolling-long-content. (scroll = paper)

Not sure how they made IE works

.container {
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  background: blue;
}

.body {
  overflow-y: auto;
  flex: 1 1 auto;
}

.content {
  width: 200px;
  height: 1200px;
}

<div class="container">
  <div class="header">aa</div>
  <div class="body">
    <div class="content">
      content
    </div>
  </div>
  <div class="footer">ccc</div>
</div>

can you explain set height to what? the header/footer can have different height, I just want body to fill, that's why I use flex:1 1 auto; — Yichz, Nov 29 '18 at 00:30
because the class body is what the overflow is on that is what the ie browser needs a height specification on, maybe you need to play around with this and find a compromise, because ie. — Carol McKay, Nov 29 '18 at 00:34

Hai Pham · Accepted Answer · 2018-11-29T02:05:36.087

0

Just add max-height: calc(100vh - 50px); to .body (I assume header + footer = 50px).

.container {
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  background: blue;
}

.body {
  max-height: calc(100vh - 50px);
  overflow-y: auto;
  flex: 1 1 auto;
}

.content {
  width: 200px;
  height: 1200px;
}

<div class="container">
  <div class="header">aa</div>
  <div class="body">
    <div class="content">
      content
    </div>
  </div>
  <div class="footer">ccc</div>
</div>

Another way is set height: 100% to .container (I'm not sure why it works well when I create html file and run in IE, but not work in html snippet here)

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: blue;
}

.body {
  overflow-y: auto;
  flex: 1 1 auto;
}

.content {
  width: 200px;
  height: 1200px;
}

<div class="container">
    <div class="header">aa</div>
    <div class="body">
        <div class="content">
            content
        </div>
    </div>
    <div class="footer">ccc</div>
</div>

edited Nov 29 '18 at 02:05

answered Nov 29 '18 at 01:40

Hai Pham

2,188
11
20

Hi, thanks for the reply, I updated a little bit the context of what I m trying to achieve. – Yichz Nov 29 '18 at 03:04
Hi @Yichaoz, did you try my second solution? (not sure why it not work directly in SO snippet, but it works well when I create html file and run in browser), I think it might help – Hai Pham Nov 29 '18 at 03:07
Setting 100% will force small dialog to be 100 height of the screen – Yichz Nov 29 '18 at 03:44
your first solution helped me, I also posted my final solution here – Yichz Nov 29 '18 at 16:35

score 0 · Answer 2 · answered Nov 29 '18 at 16:34

0

After playing a little bit,

I just needed to add overflow-y: auto; to .container

I created another example if someone is interest at:

https://codepen.io/kossel-the-styleful/pen/OaaPyq

answered Nov 29 '18 at 16:34

Yichz

9,250
10
54
92

IE11 flex item overflow vertically

2 Answers2