Issues with Flexbox functionality on Internet Explorer 11

My code is working perfectly in Firefox, Chrome, and Edge, but unfortunately not functioning properly in IE11 due to issues with the flex model. Can someone help me troubleshoot this?

Here's how it appears in Firefox:

https://i.sstatic.net/BJgVt.png

And here's how it looks in IE11:

https://i.sstatic.net/Fedul.png

body * {
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-flow: column;
  margin: 0;
}
main {
  flex: 1;
  display: flex;
}
header,
footer {
  background: #7092BF;
  border: solid;
  width: 100%;
}
section {
  border: solid;
  background: #9AD9EA;
  flex: 1
}
aside {
  border: solid;
  width: 150px;
  background: #3E48CC
}
<header>
  <p>header
</header>
<main>
  <aside>
    <p>aside
    <p>aside
  </aside>
  <section>
    <p>content
    <p>content
    <p>content
    <p>content
  </section>
</main>
<footer>
  <p>footer
  <p>footer
</footer>

htmlcssinternet-explorerflexbox

Answer №1

Flexbugs states that in IE 10-11, setting a min-height on flex containers will size the containers themselves, but their flex item children do not acknowledge the parent's size.

Here are two solutions to this issue:

1. Resize <aside> and <section> to fill the viewport + add scrollable content:

html {
  height: 100%;
}

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

...

2. Initially fill the viewport and allow normal page scrolling with additional content:

html {
  height: 100%;
}

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

...

Answer №2

Explore the complete list of IE11 Flexbox bugs on "Can I Use"

If you want to learn more about the various Flexbox bugs present in IE11 and other browsers, make sure to visit Can I Use -> Known Issues section. Here are some of the issues specifically related to IE11:

  • In IE 11, a unit must be included in the flex-basis property's third argument.
  • Containers with display: flex and flex-direction: column in IE10 and IE11 may not calculate their flexed childrens' sizes accurately if the container has min-height but lacks an explicit height property.
  • IE 11 exhibits incorrect vertical alignment of items when using min-height.

For additional insights into Flexbox issues and possible workarounds, check out Philip Walton's Flexbugs repository.

Answer №3

After extensive testing, I have successfully implemented a complex layout using flexbox. This layout includes a header, footer, main body with left, center, and right panels. The panels can contain menu items or headers and footers that require scrolling.

While most browsers handled the flex content well, IE11 and EDGE presented some challenges. However, with some adjustments, these issues were overcome.

To address the height bug in IE11, I applied fixes such as setting `height:100vh` and `min-height:100%` to the html/body elements and making them flex containers. These changes prevent view compression in IE11 without the need to set heights on container elements in the dom.

html,body {
    display: flex;
    flex-flow:column nowrap;
    height:100vh; /* fix IE11 */
    min-height:100%; /* fix IE11 */  
}

For dealing with overflow in IE EDGE, adding `overflow:hidden` to the main flex container is necessary. Without this fix, IE EDGE pushes content out of the viewport instead of keeping it contained within the flex main container.

main{
    flex:1 1 auto;
    overflow:hidden; /* IE EDGE overflow fix */  
}

https://i.sstatic.net/2p6Wt.jpg

To view my testing and example, visit my codepen page. I have highlighted the important CSS parts with the fixes I applied, hoping it will be beneficial for others facing similar challenges.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it just me, or does the float left - float right combination only break in IE

Oh dear, it seems like IE9 is causing some trouble again. The other "capable" browsers handle this HTML just fine, including IE8 which isn't even that great. Here's the code snippet: <div class="contact_info_city" id="contact_info_cityX"> ...

htmlcssinternet-explorercss-floatline-breaks

The complexities of stopPropagation() causing further confusion

I have encountered an issue with my code. It currently allows a dropdown functionality for a <ul> element, but when a child <li> is clicked, it also closes other menus of the same type. To fix this, I used an if clause to check if the clicked ...

javascripthtmljqueryjquery-events

A new URL must be refreshed for the link to properly bind the data received from the API call with the subscribe method

In my Angular application, I have a URL link that fetches data from the backend API using the subscribe method in a component. The expected behavior is that when this URL is accessed in a browser, the data should be displayed in the corresponding HTML comp ...

htmlangularapiurltypeerror

Issue with Access Denied Error in Internet Explorer 11 when Using AngularJS

Every software development process consists of two essential components. FIRST, the hard work of developing the application. SECOND, the even harder task of making it compatible with the notorious Internet Explorer. Currently, we have an AngularJS (v1.3.1 ...

javascriptangularjsinternet-explorerxmlhttprequestcors

Full-width header with scrollable content within the viewport

Is there a way to make the header and footer expand to 100% width while keeping the middle content width variable? You can view the source at http://jsfiddle.net/9dWcZ/ HTML: <div class="header"> this is header </div> <div class="content ...

cssdomlayout

Creating a dynamic HTML table in GAS with a radio button in every row poses the challenge of assigning a unique ID to each radio button in each row using a variable name

I am currently working on a Google Apps Script web application that involves a search box and a button. When the button is clicked, it dynamically loads an HTML table based on the user input from the search box. The script then retrieves data from a Google ...

javascripthtmlgoogle-apps-scriptweb-applicationsradio-button

The drop-down box options on the web page are not visible to me, but I am able to see them in the element

Having a peculiar issue with two dropdowns on my webpage. The first dropdown works perfectly fine, but when I click on the second dropdown, the options don't show up on the webpage, even though they are visible in the element window. Both dropdowns ha ...

javascriptjqueryhtmlcssajax

How can I correctly link and open a PDF file in HTML without an extension provided in the filename?

Looking for some advice. I have a client project where there are PDF files uploaded to a file structure within a LAMP Stack, but the files do not have extensions. I need the browsers to recognize that these files are PDFs and open them accordingly. Adding ...

phphtmlpdfcross-browser

Using JQuery to Load a CSHTML File into a Modal in C#

I am attempting to have the content of one specific page loaded into a modal on a different page when a button is clicked. Unfortunately, I am encountering an issue where not only the desired content from the specified page is loading, but also content fro ...

javascriptc#htmljqueryasp.net-mvc

How can I write the code to enable dragging the button for navigating to the next page?

<a draggable="true" class="user" id="leonardo" ondragstart="dragUser(this, event)" aria-selected="undefined"> IPD</a> If I want the button to navigate to the next page when dragged, what code should I write? ...

javascriptjqueryhtml.net

What steps do I need to take in order to change an HTML div's background to a black

My current project involves dynamically loading HTML content stored on disk into a specific div element. This is achieved by using the following code: $('#FictionContent').load('Content/HuckFinn.html'); Just to provide some background ...

jqueryhtmlcssvisual-studiowebmatrix-3

Determining whether an element possesses an attribute labeled "name" that commences with a specific term, apart from the attribute "value"

I'm planning to use distinctive data attributes with a prefix like "data-mo-". Let's say I have the following elements: <span data-mo-top-fade-duration="600">Title 1</span> <span data-mo-bottom-fade-duration="600">Title 2</ ...

javascriptjqueryhtmlcss

Executing JavaScript function from external SVG file globally

I am working on an HTML page that includes an external JavaScript module <script type="text/javascript" src="js/js.js"></script> and also an external SVG map called "img/map.svg". My goal is to create clickable objects on the map that will t ...

javascriptjqueryhtmlsvg

Navigate through input fields while they are hidden from view

Picture this scenario: <div> <input tabindex="1"> </div> <div style="display:none"> <input tabindex="2"> </div> <div> <input tabindex="3"> </div> As I attempt to tab through these input f ...

javascriptjqueryhtmlinputtabindex

Simple method for displaying or hiding divs depending on the status of a selected radio button using CSS only

I am currently working on showing or hiding div elements based on the status of a radio button. These divs are located after the input buttons in a different section of the page, and I am facing challenges in referencing them accurately. This code is for ...

cssradio-buttonshow-hidechecked

Is it possible to save an entire webpage that infinitely scrolls without actually manually scrolling through it?

I'm dealing with a webpage that has infinite downward scrolling. I tried automating the scrolling, but eventually the page became too large to continue scrolling. To fix this, I manually removed some DIV blocks from the source code which decreased the ...

javascriptjqueryhtmlajaxinfinite-scroll

Transforming card dimensions with Bootstrap

I am currently working on my web portfolio and I am looking to create a card format that includes an image thumbnail with text below it. However, I am facing an issue where I cannot control the size of the initial image, resulting in misaligned cards. htt ...

javascripthtmlcssbootstrap-4

Transferring data from one page to another using form variables

Currently, I have an existing app at . The app is designed to function on a single page, but I have been requested to convert it into a multi-page flow. Transitioning data from one page to another has proven to be challenging for me as I am more of a hobby ...

javascriptphpjqueryhtmlforms

Creating an HTML table with a fixed header and dynamic columns is a useful feature for displaying various

How can I dynamically create a table with fixed headers and dynamic columns based on the click of HTML buttons using AJAX and jQuery? For example, if the "3days" button is clicked, the table should have 2 fixed headers and 3 dynamic columns with names 1, 2 ...

jqueryhtmlajaxhtml-table

Raycasting in three.js - mouse pointer and highlighting not precisely aligned with intersected mesh

My current setup involves using a raycaster to highlight a row of cubes arranged in a grid format. The highlighting works fine, but I'm encountering issues with the cursor turning into a pointer precisely over the cubes in the row. Moreover, the highl ...

javascriptcssthree.jsmouseoverraycasting