Ie Flexible Box Model Not Working

IE flexible box model not working

IE doesn't use the deprecated 2009 Flexbox properties, it uses the ones from the deprecated March 2012 draft. Opera supports the Flexbox standard properties without prefixes and the 2009 properties under the -webkit- prefix.

.holder {
  width: 100%;
  margin: auto;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  text-align: center;
}

.holder #new_div {
  width: 940px;
}

.holder div {
  /* justify-content does nothing here since this element isn't a flex container */
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

#new_div {
  margin: auto;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  text-align: left;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  /* this shouldn't be necessary, as the default direction is `row` */
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  min-width: 940px;
  padding: 20px;
}

Also worth noting, this requires IE10+

Flexbox not working in Internet Explorer 11

According to Flexbugs:

In IE 10-11, min-height declarations on flex containers work to size the containers themselves, but their flex item children do not seem to know the size of their parents. They act as if no height has been set at all.

Here are a couple of workarounds:

1. Always fill the viewport + scrollable <aside> and <section>:

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
}

header,
footer {
  background: #7092bf;
}

main {
  min-height: 0; /* added 2021*/
  flex: 1;
  display: flex;
}

aside, section {
  overflow: auto;
}

aside {
  flex: 0 0 150px;
  background: #3e48cc;
}

section {
  flex: 1;
  background: #9ad9ea;
}

<header>
  <p>header</p>
</header>

<main>
  <aside>
    <p>aside</p>
  </aside>
  <section>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
  </section>
</main>

<footer>
  <p>footer</p>
</footer>

Display flex is not working in IE

Removed img-responsive CSS class from img and added vertical

.horizontal {
  height: 150px;
  line-height: 150px;
  text-align: center;
}

.vertical {
  vertical-align: middle;
  max-height: 150px;
  max-width: 100%;
}

updated Fiddle Here

display: flex not working on Internet Explorer

Internet Explorer doesn't fully support Flexbox due to:

Partial support is due to large amount of bugs present (see known
issues).

_{Screenshot and infos taken from caniuse.com}

Notes

Internet Explorer before 10 doesn't support Flexbox, while IE 11 only supports the 2012 syntax.

Known issues

• IE 11 requires a unit to be added to the third argument, the flex-basis property see MSFT documentation.
• In IE10 and IE11, containers with display: flex and flex-direction: column will not properly calculate their flexed childrens' sizes if the container has min-height but no explicit height property. See bug.
• In IE10 the default value for flex is 0 0 auto rather than 0 1 auto as defined in the latest spec.
• IE 11 does not vertically align items correctly when min-height is used. See bug.

Workarounds

Flexbugs is a community-curated list of Flexbox issues and cross-browser workarounds for them. Here's a list of all the bugs with a workaround available and the browsers that affect.

1. Minimum content sizing of flex items not honored
2. Column flex items set to align-items: center overflow their container
3. min-height on a flex container won't apply to its flex items
4. flex shorthand declarations with unitless flex-basis values are ignored
5. Column flex items don't always preserve intrinsic aspect ratios
6. The default flex value has changed
7. flex-basis doesn't account for box-sizing: border-box
8. flex-basis doesn't support calc()
9. Some HTML elements can't be flex containers
10. align-items: baseline doesn't work with nested flex containers
11. Min and max size declarations are ignored when wrapping flex items
12. Inline elements are not treated as flex-items
13. Importance is ignored on flex-basis when using flex shorthand
14. Shrink-to-fit containers with flex-flow: column wrap do not contain their items
15. Column flex items ignore margin: auto on the cross axis
16. flex-basis cannot be animated
17. Flex items are not correctly justified when max-width is used

Flexbox layout does not work in Internet Explorer 10

You need to read the notes very closely on caniuse. "Partial support" refers to supporting one of two older drafts, and they don't make a note of which browser supports which draft. IE10 supports the March 2012 draft, and it's the only one that's known to do so.

http://codepen.io/cimmanon/pen/ApHEy

.box {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  /* fix for old FF */
  width: 100%;
}

CSS flexbox not working in IE10

Flex layout modes are not (fully) natively supported in IE yet. IE10 implements the "tween" version of the spec which is not fully recent, but still works.

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

This CSS-Tricks article has some advice on cross-browser use of flexbox (including IE):
http://css-tricks.com/using-flexbox/

edit: after a bit more research, IE10 flexbox layout mode implemented current to the March 2012 W3C draft spec: http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/

The most current draft is a year or so more recent: http://dev.w3.org/csswg/css-flexbox/

---

Related Topics