Internet Explorer 11 has a problem with excessive shrinking of flex items

I have a flexbox setup with a left and right section, each of equal width. The left side displays an image and the right side contains text. While this layout works fine in Google Chrome, it does not wrap properly in Internet Explorer 11 when the width is reduced.

For a visual demonstration of the issue, check out this video: https://gyazo.com/b713844e85a2aafeb8054b5d2cdeabe1

Any suggestions on how to resolve this problem? Thank you

.d1 {
  display: flex;
  flex-wrap: wrap;
  padding: 4%;
}

.image-container {
  align-items: center;
  display: flex;
  flex: 1;
  justify-content: center;
  min-width: 200px;
}

.image-container img {
  width: 100%;
  height: auto;
}

.d1 .text {
  background-color: lightblue;
  flex: 1;
  font-size: 40px;
  padding: 2%;
}
<div class="d1">
  <div class="image-container">
    <img src="https://emilythompsonflowers.com/wp-content/uploads/2016/08/hippie-flower-300x300.jpg">
  </div>
  <div class="text">
    Thisisaverylongtext Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

Answer №1

In my opinion, adding a min-width to the .text element could be beneficial.

Here is a suggested code snippet:

.d1 {
  display: flex;
  flex-wrap: wrap;
  padding: 4%;
}

.image-container {
  align-items: center;
  display: flex;
  flex: 1;
  justify-content: center;
  min-width: 200px;
}

.image-container img {
  width: 100%;
  height: auto;
}

.d1 .text {
  background-color: lightblue;
  flex: 1;
  font-size: 40px;
  padding: 2%;
  min-width: 50%;  /* NEW */
}
<div class="d1">
  <div class="image-container">
    <img src="https://emilythompsonflowers.com/wp-content/uploads/2016/08/hippie-flower-300x300.jpg">
  </div>
  <div class="text">
    Thisisaverylongtext Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

Furthermore, I would recommend refraining from using the flex property in IE11 due to its buggy behavior.

  • flex property not working in IE

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

Get all the counter values from a Bootstrap table within a function

Suppose I have a table displaying 25 records per page with 10 rows. How can I update the counter values for Entries and Total Entries in my function when I filter by "india"? I already have the showing values but need to retrieve the Entries and Total Ent ...

default radio option with pre-selected value

Below is a radio option list, but I'm having trouble getting the desired default selection on first render: <label class="radio normalFontWeight"> <input type="radio" name="Criteria" data-ng-value="EVERYONE_REVIEWED" data-ng- ...

The image showcases interactive hover effects that resemble a button popping up

Welcome to my HTML code showcase: <div class="container"> <a target="_self" href="flower_gallery.htm"> <img data-src="holder.js/180x180" style="height:20%;width:100%;float:left;" ...

My Ajax request does not seem to function properly when attempting to transfer data to a different

Take a look at the following code snippet: <div class="category" id="<?php echo $cat->term_id; ?>"><?php echo $cat->cat_name; ?> </div> $(".category").click(function(){ var categ = $(this).attr('id&apos ...

Issue with Magnific Popup lightbox functionality, and mfp-hide is ineffective

Hello everyone, I am new to stackoverflow so please bear with me as I navigate through it. Although I am still a beginner in HTML, CSS, and JS, I have been using them for work on occasion. Recently, I implemented Magnific Popup on a website I am working o ...

Differences in font line spacing between Firefox on Windows 7 and Windows XP

Currently, I am utilizing the Verdana font for my text paragraphs. However, an issue has arisen with how this font renders in Firefox v16 on Windows XP compared to Firefox v16 on Windows 7. Interestingly enough, Internet Explorer 9 does not display any pro ...

How to design 'Sliding gallery panels' using jQuery and CSS3?

Usually, I know how to start a project with tutorials or some experience, but this time I'm stuck on what to even call it. Simply defining the concept could help me search for the right resources. Here's a quick mockup I put together: I want to ...

Storing Form Input in Browser's Local Memory

I am currently working on a form section where individuals can input their email addresses. However, I have encountered a couple of issues: (1) After submitting an email address, the page refreshes. While I understand that this is inevitable without usin ...

Using jQuery to close a DIV with a delay

At the top of my website, I have set up an alert with a close button. The jQuery function for closing the alert is as follows: /* CLOSE ALERT BAR WITH BUTTON */ $('a.ctp-alert').click(function () { $("div.ctp-alert").slideUp(); }); While this f ...

jquery carousel slider dynamically append

I have been tasked with creating a dynamic carousel using jQuery AJAX, and my supervisor recommended that I utilize the .append() method. Below is the HTML code for my carousel: <div id="myCarousel"> </div> <div cla ...

Update the appearance of a cell if the value within it is equal to zero

I have discovered a way to achieve this using inputs. input[value="0"] { background-color:#F7ECEC; color:#f00;} Now, I am looking for assistance in applying the same concept to table cells. Can anyone provide guidance? Thank you. ...

Google Map in Bootstrap FullScreen Mode Not Mobile-Friendly

Could you please take a look at the provided link and advise me on why the map is not responding correctly? I am also facing issues with the positioning of the map on the page, so any guidance on adjusting it appropriately would be greatly appreciated. Be ...

Tips for adjusting the color of a pin without altering anything else

I have a Google Marker with a default design. By default, I can create the pin with letters inside it. However, I want to change the color of this pin. So, I attempted to use this icon: https://i.sstatic.net/gFXMR.png Unfortunately, the letters shifted ...

Replacing the previous observation

My events app features an all-events component that showcases all the events created. Upon loading the all-events component, the events are fetched from the database. Below is a snippet of the relevant code from the Typescript file of the all-events compo ...

Error encountered in Internet Explorer 11 - Access is forbidden - XMLHttpRequest

I am encountering a unique issue with IE11 and ajax. Most of the time, everything works as expected when I use the code below for my requests. However, I have noticed that when I try to use it in combination with a copy and paste function, an 'Access ...

Information has been stored in the database after being updated in an

I have a field that can be edited and I want to save the changes to the database. Here is the relevant HTML code: <ng-container *ngIf="groupedVolumes"> <ng-container *ngFor="let model of groupKeys() | slice:-3" > ...

Creating an efficient login system for my website - where do I start?

I've recently started diving into the world of web development, starting with HTML, CSS, and a bit of JavaScript. However, I've hit a roadblock - while I can perform basic styling, I'm struggling to make my projects interactive. My main que ...

Ways to implement CSS styling to every input element excluding inputs located within list items of a specific class

input.not(li.tagit-new >input) { background-color: lightgrey; } <ul id="tagAdministrator" style="width: 505px" class="tagit ui-widget ui-widget-content ui-corner-all"> <li class="tagit-new" style="box-shadow: none;"> <input ty ...

What is the reason for the lack of an applied CSS selector?

.colored p{ color: red; } article > .colored{ color:powderblue; } .blue{ color: white; } <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8> <meta name="viewport" content="width=device-width, initi ...