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


source to share





All Articles