Flexbox overlapping text in IE11

Question

If you load this in IE, you will see that the content of the gray box is extending over to the yellow box, which doesn't happen on other browsers.

.parent {
  display: block;
  position: relative;
  border: 1px solid black;
  height: 300px;
  width: 200px;

  display: flex;
  flex-flow: column;
}
.childA {
  display: block;
  background-color: grey;
  width: 100%;
  height: auto;
}
.childB {
  display: block;
  background-color: yellow;
  width: 100%;
  height: 100%;
  overflow: auto;
}

<div class="parent">
  <div class="childA">
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
  </div>
  <div class="childB">
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
  </div>
</div>

What I am trying to achieve is:

let the gray box (childA) expand according to its content
let the yellow box (childB) take the remaining height of its parent
if the content yellow box (childB) has more content, overflow it properly

Can someone help me?

https://jsfiddle.net/6yuh90cd/3/

The code relevant to your problem belongs directly into your question, not just on an external site. Please edit accordingly. — CBroe, Jan 18 '18 at 14:20
[IE struggles with flexbox if it will work for you at all.](https://caniuse.com/#search=flex) — Rob, Jan 18 '18 at 14:22
@Rob It is worrying to see all these comments saying IE can't do Flexbox. Of course it can, and when one **learned its flaws and fixes**, one can make it work for most use cases. — Asons, Jan 18 '18 at 15:25
@LGSon I didn't say IE can't do flexbox but not all IEs can do flexbox and, even then, they don't support the current standard properly. — Rob, Jan 18 '18 at 15:39
@Rob We don't talk about all, the question refer to IE11. And IE11 **does** support the current standard, though in some cases it is buggy (and not the only one that is that), hence one need to learn the workarounds for each browser. — Asons, Jan 18 '18 at 16:05
@LGSon And that is what I said and pointed out with the link. — Rob, Jan 18 '18 at 16:49
Just add `flex-shrink: 0` to the flex items. Then your layout works across browsers. https://jsfiddle.net/6yuh90cd/7/ — Michael Benjamin, Jan 18 '18 at 18:25
@Michael_B That won't work properly (tested on IE11, Chrome, Firefox). `childB` overflow the `parent`. I reopened the question since that dupe link's answer does not solve the question. — Asons, Jan 19 '18 at 09:14
@LGSon, the solution does work. The problem is I posted an unfinished demo by mistake. The `flex-shrink: 0` rule should apply only to `.childA`. https://jsfiddle.net/6yuh90cd/8/ — Michael Benjamin, Jan 19 '18 at 17:52

Asons · Answer 1 · 2018-01-19T18:14:43.667

You've misunderstood how Flexbox work.

Giving the childB a height of 100% is not the proper way to say take the remaining height (even though some browsers try to make that work).

You should use the flex item properties, in this case I used the shorthand flex, to tell a flex item to take the available space.

Updated after question edit

This will solve all your expressed 3 requirements:

let the gray box (childA) expand according to its content
let the yellow box (childB) take the remaining height of its parent
if the content yellow box (childB) has more content, overflow it properly

Stack snippet

.parent {
  display: block;
  position: relative;
  border: 1px solid black;
  height: 300px;
  width: 200px;
  
  display: flex;
  flex-flow: column;
}

.childA {
  display: block;
  background-color: grey;
  width: 100%;
}

.childB {
  display: block;
  background-color: yellow;
  width: 100%;
  /*height: 100%;                        removed  */
  flex: 1;                           /*  added, take the available space  */
  overflow: auto;
}

<div class="parent">
  <div class="childA">
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
  </div>
  <div class="childB">
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
  </div>
</div>

score 0 · Answer 2 · answered Jan 19 '18 at 17:57

0

Just add flex-shrink: 0 to your overlapping item.

It works across browsers.

(I removed code that isn't necessary.)

.parent {
  display: flex;
  flex-direction: column;
  height: 300px;
  width: 200px;
  border: 1px solid black;
}

.childA {
  flex-shrink: 0; /* new; see link reference below */
  background-color: lightgrey;
}

.childB {
  overflow: auto;
  background-color: yellow;
}

<div class="parent">
  <div class="childA">
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
  </div>
  <div class="childB">
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
  </div>
</div>

jsFiddle demo

Explanation for flex-shrink: 0: Flex items overlapping in Chrome and IE11

answered Jan 19 '18 at 17:57

Michael Benjamin

346,931
104
581
701

Since OP wrote _"let the yellow box (childB) take the remaining height of its parent"_, this will not do that, though solve the overlap when text is bigger. – Asons Jan 19 '18 at 18:00
@LGSon, the question also says: *if the content yellow box (childB) has more content, overflow it properly* – Michael Benjamin Jan 19 '18 at 18:02
Maybe I missed something here, but shouldn't all the listed requirements be filled? .. If so, then if there is less content in `childB`, what you suggest won't _take remaining height_. – Asons Jan 19 '18 at 18:06
If that's ever the case, OP can simply add `flex-grow: 1` to childB. https://jsfiddle.net/6yuh90cd/10/ – Michael Benjamin Jan 19 '18 at 18:09
1

Well, that is what I already answered, which solve all 3 req. in one go. .. and OP did actually wrote _**if** the content yellow box (childB) **has** more content_ – Asons Jan 19 '18 at 18:16

score -1 · Answer 3 · answered Jan 18 '18 at 14:27

-1

This seems to work in IE 11 https://jsfiddle.net/6yuh90cd/6/

I gave childA class min-height of 50%.

.childA {
  display: block;
  background-color: grey;
  width: 100%;
  min-height:50%;
}

answered Jan 18 '18 at 14:27

Liam Kenneth

982
1
11
21

This only work as the content of `childA` happens to be just that, 50% of the parent. Add a few more lines and the overflow comes back. – Asons Jan 18 '18 at 19:14

Flexbox overlapping text in IE11

3 Answers3