Flexbox wrapper around inner scrolling div not working in Internet Explorer

Question

Flexbox wrapper around inner scrolling div not working in Internet Explorer

I have a flexbox container around a div of maximum height with auto overflow and content inside that div that is above the maximum height (reproduced below).

In Chrome / Firefox / Safari, the #wrapper div respects its maximum height and scrolls the inner content. In Internet Explorer, #wrapper is the full height of the inner content.

#flex {
    display: flex;
    max-height: 100px;
}

#wrapper {
    overflow: auto;
}

#content {
    width: 100px;
    height: 400px;
    background: red;
}

<div id="flex">
    <div id="wrapper">
        <div id="content">
        </div>
    </div>
</div>

Run code

+3

css internet-explorer flexbox

Ross boucher 05 Aug 15 at 22:39

source to share

No one has answered this question yet

Check out similar questions:

15

CSS3 transform property works differently in Internet Explorer

7

Flexbox children overflow parent with maximum height specified in IE

3

CSS: image scaling issue with flexbox in Firefox / Internet Explorer

2

max-width and max-height in Internet Explorer

2

CSS: Scrolling divs in flexbox broken on IE11?

1

Flexbox text spilling from div in Internet Explorer 11

1

Shrink flexbox child using scroll - works in Chrome not Firefox

0

How to scroll and center inside a flexible div

0

Flex wrap get 100% width with flexbox in IE

0

Correct Flexbox prefix for Explorer

Flexbox wrapper around inner scrolling div not working in Internet Explorer

More articles: