IE disregard min-height property of flex container

After researching, it appears that using the standardized flex terms should work with IE10/IE11.

I have a container div with 2 child divs.

Both child divs are smaller than 400px, so there should always be enough space for the justify-content: space-between.

My goal is to have the first child at the top and the second child at the bottom.

This layout functions correctly in Chrome and Firefox but not in IE, and I'm unsure why.

Any comments or feedback would be appreciated.

<div style="display: flex; flex-direction: column; justify-content: space-between; min-height: 400px; background-color: lightyellow;">
  <div style="background-color: red;">
    <h2>Title (variable height)</h2>
    <p>Summary (variable height)</p>
  </div>
  <div style="background-color: orange;">
    <img src="http://avatarbox.net/avatars/img32/tv_test_card_avatar_picture_61484.jpg" />
  </div>
</div>

https://jsfiddle.net/akxn68vm/

htmlcssinternet-explorerflexbox

Answer №1

Issues with rendering flexbox properly have been identified in IE 10 & 11.

One issue is that a flex container does not adhere to the min-height property in these browsers.

An easy fix is to turn your flex container into a flex item as well.

Simply include this code snippet (no other modifications needed):

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

updated fiddle link

For more information, visit: https://github.com/philipwalton/flexbugs#flexbug-3

Answer №2

As per findings on this reported bug, Internet Explorer 11 fails to display items properly when min-height is applied within flexbox.

Although the issue appears to be resolved in Edge, it still persists in IE versions 10 and 11.

Answer №3

If you're encountering a bug in IE10/11, there is a solution available. Visit this link for more information.

To resolve the issue in IE10/11, simply wrap a flex container around the existing one. For example, adding display: flex to the body tag and setting width: 100% on the container div should do the trick.

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

Having trouble converting my form data into an array for table display

My website has a form for entering dummy patient information, with a table to display the submitted data. However, I'm facing an issue where the data is not being stored in the array when the user clicks the "Add Patient" button. Upon checking the arr ...

javascriptjqueryhtmlarrayshtml-table

Transferring variables from CSS or HTML to inline SVG

I want to create a unique SVG star rating component using a single SVG. The shape consists of 5 stars filled with a horizontal gradient. Take a look at the following code snippet: <svg width="68" height="11" viewBox="0 0 68 11"> <linearGradi ...

htmlcsssvg

How about a fading effect for the select box?

I'm currently working on creating a select tag that opens its options slowly with a fade in, fade out effect when the user clicks on "Actions." I've attempted to use jQuery for this feature but haven't had any luck. Here's my code: &l ...

jqueryhtmlangularjscss

What is the best way to horizontally center a child div within its parent container while keeping it fixed at the top?

I am struggling to center a child div horizontally within its parent div while also fixing it to the top of the parent. I have tried various approaches in CSS, but so far I haven't been successful :-( I can either center it or fix it to the top, but w ...

htmlcss

Learn how to use Angular for submitting a form with AJAX interactions

Hello, I am a beginner with Angular and I have been trying to submit a form and check in my MySQL database if the user is present. All of my code works because when I directly input the JSON into my PHP/CodeIgniter code, I get the employee that I'm lo ...

phphtmlangularjscodeigniter

Filter search results to display only posts

My website uses a custom Wordpress theme that has a search functionality. The issue I'm facing is that when I perform a search, it redirects me to the search.php page. However, instead of just displaying posts, it also shows pages and events from the ...

phphtmlwordpress

Notify the user immediately if an HTML template is stolen using Jquery and PHP

After uploading an HTML template to themeforest, I discovered that some websites were giving away the full source code for free. Since HTML is easy to copy, obfuscation doesn't solve the issue. Is there a way to use JQuery to alert me if someone hosts ...

phpjqueryhtml

Incorporating CSS styles into a dynamic JavaScript computation

I'm attempting to apply inline CSS to a JS calculation (e.g. 3*2*1) in order to make it appear red. I have experimented with using a span tag, but it only displays the calculation and not the result. I also tried utilizing an internal style sheet. Ho ...

javascriptcss

Conceal the sidebar once user is logged in

I need a dynamic webpage; upon loading the login page, the sidebar should be hidden and the login page should occupy the full width of the page. Once the user successfully logs in, the sidebar along with all components should be displayed. I've attemp ...

javascripthtmlangulartypescriptbootstrap-4

Different ways to use jquery to move to the top of an overflow div

$('.lb').click(function() { $('#modal').hide(); var id = $(this).attr('id'); var dir = '/lightbox/' + id + '.php'; $('#lightbox').find('#modal').load(dir, function() { ...

javascriptjqueryhtml

Card columns with dropdown extending into adjacent column

Encountering a strange problem with the card-columns layout in Bootstrap when using dropdown menus within the cards. The issue arises when the dropdown-menu divs of the lower cards bleed into the next column, despite appearing in the correct position. Thi ...

htmlcsstwitter-bootstrapbootstrap-4

Tips for consistently positioning a div beneath another div in HTML/CSS

Would appreciate it if you could review this. <.div id="main"> Main Div <./div> <br/> <.div id="sub">Sub-Division<./div> ...

jqueryajaxcss

Month and year selection feature in ExtJS 4 catalog

I recently came across an interesting Fiddle that featured a Month and Year picker for apps. After finding this Fiddle here, I noticed that it was built using Extjs 5.0, and it worked perfectly. However, when attempting to switch it to version 4.2.1, the l ...

javascriptcssextjsextjs4

How to automatically scroll to the bottom using jquery/css

I've recently developed a chatroom using li elements, but I'm encountering an issue where the chat doesn't stick to the bottom once it reaches a certain number of messages. I suspect it has something to do with the height settings, but I can ...

javascriptjquerycss

Struggles with implementing CSS Grid's dynamic column heights and expanding rows

Linked partially to Removing empty space in CSS Grid, with specific adjustments I am aiming for. Essentially, I want my rows and columns to expand and contract based on the content present. In this CodePen example, you can observe that the content of the ...

htmlcsscss-grid

Click the button to automatically insert the current time

Hello, I am new to scripting and seeking some guidance. I have a code that retrieves the current time and sends it to a MySQL database when a button is clicked. <form action="includes/data_input.inc.php" method="POST"> <!-- button - Start ...

javascriptphphtml

Using numerous background images can lead to issues in Safari browser

Currently experimenting with styling the body element using two images. background: url(bg2.png) repeat-x, url(bg1.png) repeat; An issue arises in Safari where it reports an error in the console, stating that it cannot locate the image file specified at ...

htmlcsssafariwebkit

The ultimate HTML5 code that stands above the rest

As newcomers to mobile technology, we now have our HTML5 page operational with PHP. Our next step is to transition to mobile. Whether it's through a native app or mobile web, the specific platform doesn't matter in our current situation. What we ...

html

Leveraging webpack for CSS bundling

I'm currently working on bundling some NPM modules using webpack instead of utilizing a CDN. While I've successfully managed to integrate the .js files, I'm facing challenges with including the .css files for these modules. One example is ...

javascriptcssnode.jsnpmwebpack

I'm experiencing difficulty getting my code to function properly when adding or removing classes with Bootstrap Glyphicons

Recently, I decided to play around with bootstrap's glyphicons. By utilizing Jquery's addClass and removeClass functions, I tried to smoothly transition from one glyphicon to another. Here is the code snippet: var glyphOn = true; //The glyphO ...

javascriptjqueryhtmlcsstwitter-bootstrap