Flexbox, Min-Height, Margin Auto and Internet Explorer

Flexbox, min-height, margin auto and Internet Explorer

This is a bug in IE's flexbox implementation:

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.

Bug report - (https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview#tabs)

It appears that this is on Microsoft's radar and will be fixed some point in the future:

Unfortunately, we are not able to address this feedback in our upcoming release. We will consider your feedback for a future release. We will keep this connect feedback bug active to track this request.

Reply from Microsoft - (https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview#tabs)

For now the simple solution is to use height:

.wrapper {

  border: 1px solid grey;

  box-sizing: border-box;

  display: flex;

  flex-direction: column;

  height: 300px;

  padding: 5px;

}

.element {

  border: 1px solid grey;

  height: 35px;

  margin: 5px;

}

.element:last-child {

  margin-top: auto;

}
<div class="wrapper">

  <div class="element"></div>

  <div class="element"></div>

  <div class="element"></div>

  <div class="element"></div>

</div>

Internet Explorer doesn't honor my min-height: 100% with flexbox

Here is the fix:

HTML

<body>
  <header>Header</header>
  <main>Here comes the content ...</main>
  <footer>Footer</footer>
</body>

CSS

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
header, footer {
  flex-shrink: 0;
}
main {
  flex: 1 0 auto;
}

jsfiddle: http://jsfiddle.net/d5syw3dc/

auto margin expansion not working inside flex box on IE11

It appears that my problem was coming from the fact that IE11 was not taking into account the min-height of .parent.

Fixed it by making .grandparent a flexbox.

more on this here.

Setting min-height in grid container in IE11

It seems that IE has a min-height bug when using CSS Grid. We can use css-tricks to fix it in IE. You could give the parent a grid column container like below:

display: -ms-grid;
-ms-grid-columns: 100%;

Then the min-height property will work in IE.

Flexbox vertical content align with overflow in Internet Explorer

Because .container has a fixed height we can use absolute positioning to center .child.

.container {

  background-color: grey;

  height: 150px;

  width: 100%;

  position: relative;

  overflow: hidden;

}

.child {

  background-color: lightgrey;

  height: 100%;

  width: 100%;

  left: -200%;

  right: -200%;

  top: -200%;

  bottom: -200%;

  margin: auto;

  position: absolute;

  font-size: 5em;

  animation: changesize 3s infinite;

}

svg {

  width: 100%;

  height: 100%;

}

.st0 {

  fill: #00748A;

}

.st1 {

  fill: #D3D938;

}

@keyframes changesize {

  0% {

    width: 100%;

    height: 100%;

  }

  50% {

    width: 500%;

    height: 500%;

  }

  100% {

    width: 100%;

    height: 100%;

  }

}
<div class="container">

  <div class="child">

    <svg version="1.1" id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3000 3000"><circle class="st0" cx="1500" cy="1500" r="1401.2"/><circle class="st1" cx="1500" cy="1500" r="45.2"/>

        </svg>

  </div>

</div>

How to make a sticky footer using flexbox in IE11?

IE has a min-height bug and needs display: flex on the flex column containers parent, in this case the html

Fiddle demo

Update your CSS like this

*,

*:after,

*:before {

  box-sizing: border-box;

}

html, body {

  margin: 0;

  display: flex;

}

body {

  flex-direction: column;

  min-height: 100vh;

}

main {

  flex-grow: 1;

}
<header>

  Header

</header>

<main>

  <p>Main</p>

  <p>Main</p>

  <p>Main</p>

  <p>Main</p>

  <p>Main</p>

</main>

<footer>

  Footer

</footer>

HTML Flex layout looks different in Internet Explorer

Here's an idea that may work for you:

body {
  display: flex;
}

.wrap {
  min-height: 100vh;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  max-width: 1200px;
  border: 1px solid #222222;
}

.main {
  flex: 1 1 auto;
  display: flex;
}

header {
  background: green;
  flex: 0 0 25px;
}

#footer {
  background: green;
  flex: 0 0 25px;
}

.sidebar {
  background: blue;
  flex: 0 0 135px;
  padding: 10px;
}

.content {
  background: yellow;
  padding: 10px;
  flex: 1 1 auto;
}

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}
<div class="wrap">
  <header>
    <div class="header-inner-left"></div>
    <div class="header-inner"></div>
  </header>
  <main class="main">
    <div class="sidebar"></div>
    <div class="content"></div>
  </main>
  <div id="footer">
    <div class='footerleft'></div>
    <div class='footerright'></div>
    <div style="clear: both;"></div>
  </div>
</div>

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>

Related Topics

Prevent Child Div from Overflowing Parent Div

Webkit CSS Reset

Table Cell Loses Border When CSS Gradient Filter Is Applied in IE8

Use Nth-Child as CSS Variable

Bootstrap 4 Flex Grid System Only

Chrome's Hidden CSS Scroll-Snap Threshold and How to Change It

How to Use Google Web Fonts in an HTML Email

Css3 Animation Is Not Working in Ie11 But Works in Other Browsers

Can You CSS Blur Based on a Gradient Mask

How to Prevent Division When Using Variables Separated by a Slash in CSS Property Values

CSS - Circle Border with Various Colors

How to Hide Default Choose File Button

CSS Link Element Jumps on Hover

Multiple !Important Class Declarations and Precedence

Vertical Scrollbar Leads to Horizontal Scrollbar

How to Alias Class Name in CSS or SASS

How to Change Svg Fill Color When Used as Base-64 Background Image Data

How to Make IE8 Honour Opacity on an ':Before' Pseudo Element


Leave a reply



Submit