Flexbox Max-Height Issue with Ie11

Flexbox max-height issue with IE11

You have two problems to address in this layout for it to work in Chrome, Safari, Firefox and IE11.

The minimum sizing algorithm on flex items.

A flex item, by default, cannot be smaller than the size of its content. The minimum size is defined in the spec as min-width: auto and min-height: auto.

Some browsers take it upon themselves to adjust this setting (which is why your layout works in Chrome). Other browsers require you to override the default setting (which is what is needed in FF and IE11).

You can override the default with min-width: 0 / min-height: 0, or overflow with any value other than visible.

Add this to your code:

.flex-wrapper .flex-wrapper-inner .column-wrapper {
    flex-grow: 1;
    display: flex;
    overflow: hidden;; /* IE11 & Firefox fix */
}

Here's a more complete explanation:

• Why doesn't flex item shrink past content size?

---

IE11 is ignoring the `max-height` and `min-height` on your flex container.

In your layout, it appears that IE11 is simply ignoring your max-height and min-height rules. However, these rules appear to work fine on flex items. So make your container also a flex item.

Add this to your code:

body {
  display: flex; /* IE11 fix */
}

More information:

• flex container min-height ignored in IE
• https://github.com/philipwalton/flexbugs

---

body {

  display: flex; /* IE11 fix */

}

.flex-wrapper {

  display: flex;

  margin: 20px auto;

  width: 1184px;

  max-height: 80vh;

  border: 2px solid red;

  smin-height: 150px;

  flex-shrink: 0; /* override default `flex-shrink: 1` */

}

.flex-wrapper .flex-wrapper-inner {

  display: flex;

  width: 100%;

  flex-direction: column;

}

.flex-wrapper .flex-wrapper-inner .header {

  display: flex;

  flex-shrink: 0;

  width: 100%;

}

.flex-wrapper .flex-wrapper-inner .header H4 {

  flex: 1;

}

.flex-wrapper .flex-wrapper-inner .column-wrapper {

  flex-grow: 1;

  display: flex;

  overflow: hidden;; /* IE11 & Firefox fix */

}

.flex-wrapper .flex-wrapper-inner .column {

  flex: 1;

  overflow-y: auto;

}

.flex-wrapper .flex-wrapper-inner .column H4 {

  text-align: center;

}

.box-results-users .list-group-item {

  margin: 0;

}

.box-results-users .list-group-item IMG {

  height: 60px;

  width: 60px;

}

.box-results {

  position: relative;

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="flex-wrapper">

  <div class="flex-wrapper-inner">

    <div class="header">

      <h4>Box 1</h4>

      <h4>Box 2</h4>

      <h4>Box 3</h4>

    </div>

    <div class="column-wrapper">

      <div class="column">

        <div class="box-results list-group">

          <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>

          <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>

          <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>

          <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>

          <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>

          <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>

          <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>

          <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>

          <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>

          <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>

          <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>

          <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>

          <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>

          <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>

        </div>

      </div>

      <div class="column">

        <div class="box-results">

          <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>

          <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>

          <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>

          <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>

          <a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>

        </div>

      </div>

      <div class="column">

        <div class="box-results box-results-users">

          <div class="media list-group-item">

            <div class="media-left">

              <a href="#">

                <img class="media-object" src="https://randomuser.me/api/portraits/men/38.jpg" alt="...">

              </a>

            </div>

            <div class="media-body">

              <h4 class="media-heading">User Test</h4> ...

            </div>

          </div>

          <div class="media list-group-item">

            <div class="media-left">

              <a href="#">

                <img class="media-object" src="https://randomuser.me/api/portraits/men/38.jpg" alt="...">

              </a>

            </div>

            <div class="media-body">

              <h4 class="media-heading">User Test</h4> ...

            </div>

          </div>

          <div class="media list-group-item">

            <div class="media-left">

              <a href="#">

                <img class="media-object" src="https://randomuser.me/api/portraits/men/38.jpg" alt="...">

              </a>

            </div>

            <div class="media-body">

              <h4 class="media-heading">User Test</h4> ...

            </div>

          </div>

          <div class="media list-group-item">

            <div class="media-left">

              <a href="#">

                <img class="media-object" src="https://randomuser.me/api/portraits/men/38.jpg" alt="...">

              </a>

            </div>

            <div class="media-body">

              <h4 class="media-heading">User Test</h4> ...

            </div>

          </div>

          <div class="media list-group-item">

            <div class="media-left">

              <a href="#">

                <img class="media-object" src="https://randomuser.me/api/portraits/men/38.jpg" alt="...">

              </a>

            </div>

            <div class="media-body">

              <h4 class="media-heading">User Test</h4> ...

            </div>

          </div>

          <div class="media list-group-item">

            <div class="media-left">

              <a href="#">

                <img class="media-object" src="https://randomuser.me/api/portraits/men/38.jpg" alt="...">

              </a>

            </div>

            <div class="media-body">

              <h4 class="media-heading">User Test</h4> ...

            </div>

          </div>

          <div class="media list-group-item">

            <div class="media-left">

              <a href="#">

                <img class="media-object" src="https://randomuser.me/api/portraits/men/38.jpg" alt="...">

              </a>

            </div>

            <div class="media-body">

              <h4 class="media-heading">User Test</h4> ...

            </div>

          </div>

          <div class="media list-group-item">

            <div class="media-left">

              <a href="#">

                <img class="media-object" src="https://randomuser.me/api/portraits/men/38.jpg" alt="...">

              </a>

            </div>

            <div class="media-body">

              <h4 class="media-heading">User Test</h4> ...

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

IE11 - Flex child takes full height

That is one of IE's flex bugs, the min-height when using flex direction column "bug".

In your case, add display: flex to the body and flex-grow: 1; to the parent (flex-basis: 100% or width: 100% will work as well).

body {

  display: flex;

}

.parent {

  flex-grow: 1;           /*  fill horizontal space */

  display: flex;

  flex-direction: column;

  max-height: 500px;

}

.header {

  flex: 0 0 auto;

  background: red;

  height: 50px;

}

.content {

  background: yellow;

  flex: 1 1 auto;

  position: relative;

  overflow-y: scroll;

}

.footer {

  flex: 0 0 auto;

  background: blue;

  height: 50px;

}

.long-item {

  height: 2000px;

}

<div class="parent">

  <div class="header">Header</div>

  <div class="content">

    <div class="long-item">Content</div>

  </div>

  <div class="footer">Footer</div>

</div>

IE11 calculates the height of parent flex container incorrectly

When you use the height property, some browsers will interpret that as the limit. As an alternative, use min-height.

Instead of this:

html {
  height: 100%;
}
body {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

Just use this:

body {
  min-height: 100vh;      
  display: flex;
  flex-direction: column;
}

revised codepen

Alternatively, this also works:

html {
  display: flex;
  flex-direction: column;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

revised codepen

Both methods tested in Chrome, FF, IE11 & Edge.

Using flexbox with overflow:auto is not working in IE11

EDIT

This answer now stops content to always have 150px height.

• Add: max-height: 150px to .content
• Keep: overflow: auto; on .content

https://codepen.io/anon/pen/zzwmgX

.main {

    display: flex;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    -webkit-transform: translate(-50%, -50%);

    background-color: gray;

    flex-direction: column;

}

.top, .bottom

{

    color: white;

    background: blue;

}

.content {

    overflow-y: auto;

    max-height: 150px;

}

Flexbox not filling height in IE11

This a known IE bug that unfortunately has been closed as Won't Fix by IE Team and described as follows:

In all other browsers that support flexbox, a flex-direction:column based flex container will honor the containers min-height to calculate flex-grow lengths. In IE10 & 11-preview it only seems to work with an explicit height value.

AFAIK and despite this description, the bug also applies when flex-direction is row. As mentioned in the comments Philip Walton has proposed a solution here, which includes setting height to a fixed value, but this is not an option for OP.

As a workaround I propose to set a min-height: 100vh to the main element too:

.wrapper{
  background-color: red;
  min-height: 100vh;
  display: flex;
}

.sidebar{
  background: orange;
  flex: 0 0 300px;
}
.main{
  background-color: green;
  min-height: 100vh;
}

Pen here.

---

Related Topics