In IE11, using flex-direction column can cause flex items to overlap

Encountering a problem with flexbox in IE11. The flex-items overlap when using flex-direction: column:

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

In chrome and safari, it appears like this:

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

.container {
  display: flex; 
  flex-direction: column;
}
.flex {
  flex: 1 1 0%;
}
<div class="container">
  <div class="flex">
    Hello
  </div>
  <div class="flex">
    World
  </div>
</div>

Created a codepen to showcase the issue:

http://codepen.io/csteur/pen/XMgpad

Any suggestions on how to prevent this overlapping layout in IE11?

htmlcssinternet-explorerflexboxinternet-explorer-11

Answer №1

The issue stems from the 0% value in your .flex class. Simply modify it to 'auto' and the problem should be resolved:

.flex {
  flex: 1 1 auto;
}

Answer №2

Try using flex: 1 1 auto; instead of flex: 1 1 0%;

.container {
  display: flex; 
  flex-direction: column;
}

.flex {
  flex: 1 1 auto;
}
<div class="container">
  <div class="flex">
    Greetings
  </div>
  <div class="flex">
    Universe
  </div>
</div>

Answer №3

After encountering this issue, I discovered that the key to solving it was to manually define the width of the container element. Since the display property flex is set to column, IE11 automatically adjusts the container's width based on the content inside its children (keep in mind that in column alignment, flex boxes are turned sideways so they expand horizontally when overflowing instead of vertically).

To address this, my code appeared as follows:

.container {
  display: flex; 
  flex-direction: column;
  width: 100%; // explicit width required
}

.flex {
  flex: 1 1 auto; // or any other value
}

Answer №4

Additionally, keep in mind that when you use flex: 1;, it actually translates to flex : 1 1 0%;. To ensure better compatibility with Internet Explorer users, it is recommended that you specify flex: 1 1 auto; as stated earlier.

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

Balancing the use of Javascript and HTML for optimal code maintainability

Dealing with a form that contains over 100 form controls can be a challenging task. The complexity arises from the need for non-trivial logic to determine when to hide, show, disable, or enable various form controls. Currently, the code includes multiple i ...

jqueryhtmlangularjseval

Leveraging the power of javascript to include content before and after

I am looking to understand how I can insert an HTML element before and after certain elements. For example, let's say we have the following code in a real file: <ul class="abcd" id="abcd></ul> How can I display it like this using JavaScr ...

javascriptphphtmlreplace

Slide the menu off to the right

Check out these images to see my progress: Main Image. When you click on the menu, everything shifts right. I've managed to set up the push menu, toggle switch menu, and main divs. Now I need help with centering the 3 lines that are clicked within th ...

htmlcssvertical-alignmentnav

A useful Javascript function to wrap a string in <mark> tags within an HTML document

I have a paragraph that I can edit. I need to highlight certain words in this paragraph based on the JSON response I get from another page. Here's an example of the response: HTML: <p id="area" contenteditable> </p> <button class="bt ...

javascriptjqueryhtmljson

The header bar intrudes into the main content area

I am in the process of transitioning my landing page design from Bootstrap to Semantic-UI. The layout includes a fixed top navbar and main content split into two columns (3-cols and 9-cols) - the left column is reserved for a sidebar, while the right colum ...

htmlcssgrid-layoutsemantic-ui

I am receiving a reference error even though the day variable has already been defined. Can you kindly point out

When I attempt to log in, the page is giving me the correct output. Interestingly, even after encountering an error, the webpage continues to function properly. app.get("/", function(req, res) { let day = date.getDate(); console.log(day); r ...

javascripthtmlexpress

Tips for removing a particular slide from bootstrap carousel with JQuery

I'm a beginner when it comes to bootstrap. I have a Carousel with some slides that include a Decline button. When the button is clicked, I want to delete/remove that slide and move on to the next one. Can this be achieved using JQuery? I've been ...

jquerycsstwitter-bootstrap

Tips for lining up items in a row

I am struggling to align these boxes next to each other instead of on top of each other. It seems like it should be an easy task, but I just can't seem to make it work. Check out my code here for reference. <body> <div class="horAlign"&g ...

htmlcssalignment

The navigation bar created with HTML, CSS, and JS is not displaying the menu as expected and is also experiencing issues with changing the order of links

I'm currently in the process of revamping my portfolio site, opting to use Bootstrap for the layout due to its efficiency. While attempting to implement a drop-down navbar using Bootstrap, I encountered difficulties as the menu failed to appear. Thus, ...

javascripthtmlcssbootstrap-4responsive-navigation

most effective method to link table header to corresponding table row within this specific data organization

In my current project, I have a table component that relies on two data structures to create an HTML table: one for the table schema (paymentTableMetadata) and one for the table data (paymentTableData). To simplify the process, I have hardcoded these data ...

htmlangulardata-structureshtml-tablengfor

Click to reveal the hidden div located at the bottom of the webpage

I have created a simple webpage where all the content is visible without the need to scroll down. However, there is additional content at the bottom that I want to keep hidden until the user chooses to see it. The idea is to have a phrase at the bottom o ...

javascriptjqueryhtmlcssshow

Click to make the arrow come to life through animation!

I am brand new to coding and this is my inaugural code snippet: .container_menu { position: relative; top: 0px; left: 0px; width: 25px; height: 25px; } .container_menu .line-1 { background-color: black; width: 59%; height: 2px; positio ...

cssanimation

Struggling with my Transform Origin in CSS for SVG

I have two classes (firstCircle & spin) on the first circle on the left, and I'm attempting to make it rotate in place. After removing them from the css so you can see the circle, I am having trouble with transform-origin. My code seems wrong as i ...

csssvg

Having trouble retrieving the full png image using PhantomJs render command

Currently, I am utilizing PhantomJS to convert an html file into a png image. However, the html file is quite long horizontally and when using PhantomJs to render it as an image, it does not capture the entire length up to the last horizontal scroll. I a ...

javascripthtmlimagepngphantomjs

Printed plaintext of CSS & jQuery code on the 200th iteration in PHP

I encountered an issue while working on a script that involved displaying query data based on domain type (referred to as typeX & type Y). To achieve this, I utilized the jQuery slidetoggle function along with some CSS. Everything was functioning perfectly ...

phpjqueryhtmlcss

Obtaining the URL of a page when a link is clicked in an email

Is there a way to automatically append the URL of the page when a link in an email is clicked? I attempted using javascript and Iframes, but it seems that email clients disable these features for security reasons. I also experimented with Mailgun webhooks, ...

javascriptphphtmlemailiframe

Blending images on social media platforms

I'm trying to create a hover effect for my social media icons where one icon fades into another when the mouse hovers over it. I came up with this idea: HTML: <div class="socials"> <img src="../images/fb.png" id="fb1" /> <img ...

htmlcssfade

Web Page Content Scrambling/Character Exchange

I've encountered a perplexing issue that seems to strike randomly, yet I've managed to replicate the problem on three different desktops. Oddly enough, some other desktops never experience this issue and I'm at a loss as to what could be cau ...

javascriptphphtmlgoogle-chrome

What is the best way to reveal the square's id value upon hovering over it exclusively?

In this assignment, I am refraining from using HTML and focusing on JavaScript to create functionality. Here's my progress so far: document.addEventListener("DOMContentLoaded", function () { let button = document.createElement('button' ...

javascriptcssdom

Tips for retrieving the value by reading and clicking on multiple identical href elements with the help of FindBy method using CSS

<a href="test.aspx?id=1">TESTGOWN</a> <a href="test.aspx?id=2">TESTGOWN</a> TESTGOWN can be found in various places on the page. This particular section displays links. @FindBy(how = How.CSS,using = "a[href='test.aspx&ap ...

javacssseleniumselenium-webdriver