The image's max-width property is not functioning as expected within a flexbox layout in Internet Explorer 11, yet it displays

I'm currently working on a 2 by 2 grid layout using flexbox, where the items in the first column are combined together. Check out the setup below:

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

Everything looks great in Google Chrome but unfortunately, I've run into an issue with IE11. The image within the flexbox is causing its container to stretch, and despite my efforts to find a solution online, nothing seems to work. It seems like my situation is unique compared to similar problems reported.

This is how it appears in IE: https://i.sstatic.net/5xJIS.png

Could you assist me in identifying what might be causing this problem? I've set up a plunker for you to experiment with your solutions.

CSS:

        body {
          width: 100%;
        }

        .element {
            display: flex;
            flex-direction: row;
            width: 100%;
        }

        .name {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 100px;
            font-weight: bolder;
        }

        .detail-wrapper {
            display: flex;
            flex-direction: column;
            flex: 1 0 0;
            width: 100%;
        }

        .detail {
            display: flex;
            flex: 1 0 0;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
        }

        .detail img {
            max-width: 100%;
        }

        .name, .detail {
            border: 1px solid;
            margin: 8px;
            padding: 8px;
            text-align: center;
            word-break: break-word;
        }

HTML:

    <div class="element">
        <div class="name">name</div>
        <div class="detail-wrapper">
            <div class="detail">
                <img src="https://miro.medium.com/max/1200/1*y6C4nSvy2Woe0m7bWEn4BA.png" />
            </div>
            <div class="detail">
                <a href="#">url</a>
            </div>
        </div>
    </div>

https://plnkr.co/edit/q6Xme6ETvW20Gw57CIWQ?p=preview

htmlcssflexboxinternet-explorer-11

Answer №1

Flex compatibility issues have been identified with the IE browser, impacting its ability to accurately calculate values.

(1) To address this issue, it is recommended to substitute max-width with width in the .detail img class.

(2) Another suggestion is to replace flex: 1 0 0; with flex: 0 0 auto; in the .detail class.

Edit:-

The problem was resolved by adding an extra div containing the img tag, as advised by @Xegara. This solution also proved effective with max-width for IE 11 browser.

Updated code:

<!DOCTYPE html>
<html>

<head>
    <script src="script.js"></script>
    <style>
        body {
          width: 100%;
        }
        
.extra_div{
          width: 100%;
        }

        .element {
            display: flex;
            flex-direction: row;
            width: 100%;

        }
        
        .name {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 100px;
            font-weight: bolder;
        }
        
        .detail-wrapper {
            display: flex;
            flex-direction: column;
           /*flex: 0 0 auto;*/

            width: 100%;
        }
        
        .detail {
            display: flex;
            /*flex: 1 0 0;*/
            flex: 0 0 auto; /*-------------------------made change here */
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .detail img {
            max-width: 100%;   /*-------------------------made change here */
        }
        
        .name, .detail {
            border: 1px solid;
            margin: 8px;
            padding: 8px;
            text-align: center;
            word-break: break-word;
        }
    </style>
</head>

<body>
    <div class="element">
        <div class="name">name</div>
        <div class="detail-wrapper">
            <div class="detail">
<div class="extra_div">
                <img src="https://miro.medium.com/max/1200/1*y6C4nSvy2Woe0m7bWEn4BA.png" />
</div>
            </div>
            <div class="detail">
                <a href="#">url</a>
            </div>
        </div>
    </div>
</body>

</html>

Browser Output in IE 11:

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

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

Firefox Flaw: Animation Issues with CSS

My Website has a CSS animation that creates a hover effect on a button. While the animation looks good in Chrome and IE, I encountered an issue with Firefox. https://i.sstatic.net/y2po7.png Some white pieces are still visible after hovering. Here is th ...

csscss-animations

The use of dangerouslySetInnerHTML causes the page layout to stretch, expand, or grow in size

I am currently working on my NextJs app, where I'm utilizing CosmicJs as a headless CMS to showcase content on the webpage. Within the layout of my page, I have structured it with 3 columns, and the content pulled from the CMS is meant to be displaye ...

cssreactjsnext.jsflexboxcosmicjs

Images of equal height without compromising the resolution

How can I create responsive images with the same height inside a DIV tag, with a specified height of 200px? Any assistance would be greatly appreciated. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="desc ...

htmlcss

Tips for hiding the calendar icon once a form has been submitted

Below is the HTML code snippet for the date field. <asp:TextBox ID="txtExpiryDate" runat="server" Width="80px" MaxLength="10" CssClass="fromDate" /> And here is the HTML code snippet for the Submit button. <asp:Button ID="cmdSubmit" runat=" ...

javascriptjqueryhtmlasp.netvb.net

Design question: how can we create a layout where the Header, Content, and Footer all have expanding background colors but still maintain centered content?

In my layout, I wanted everything to be centered using the "margin=0 auto" technique. However, I also needed the header and footer to expand to both sides when the browser window is enlarged. The challenge was that if I centered everything, the black backg ...

csslayoutcolorsbackground

Sequentially animate objects with a fade-out and fade-in effect

Attempting to achieve a fade-out, fade-in animation using JavaScript and CSS. Here is the CSS animation code: @keyframes fade-in{ 0%{ opacity: 0%; } 100%{ opacity: 100%; } } @keyframes fade-out{ 0%{ opacity: 100%; } 100%{ opacity: 0%; } } Impleme ...

javascripthtmlcss

div that adjusts its max-width to always perfectly match the width of its contents

Check out this jsfiddle for more information: http://jsfiddle.net/tN6QE/2/ The CSS code we are using is as follows: div { display: inline-block; border: solid 1px black; padding: 10px; max-width: 200px; } We are dealing with two scenarios here. ...

htmlcss

Text alignment issues cause animation to vanish

Utilizing particles.js, I set up a full-screen particle effect by specifying the animation to be full-screen with height: 100vh;. This worked perfectly as intended. However, when attempting to add text on top of the particle animation and center it vertica ...

javascripthtmlcss

"Apply a class to a span element using the onClick event handler in JavaScript

After tirelessly searching for a solution, I came across some answers that didn't quite fit my needs. I have multiple <span id="same-id-for-all-spans"></span> elements, each containing an <img> element. Now, I want to create a print ...

javascriptjqueryclassonclickhtml

Interactive Inner Frame inspired by Google Maps, designed for easy dragging and navigating

Recently, I've been toying with the idea of creating a JavaScript game, particularly in the style of real-time strategy (RTS) games. The main question on my mind is this: How can I develop a draggable inner frame, akin to the functionality found in G ...

javascriptjqueryhtml

Guidance on transferring servlet variables to an HTML page through redirection in Java

I am looking for a way to open an HTML page from my Java servlet and utilize the variables of that servlet to populate the form fields in the HTML page when it is opened. Below is the code snippet of my servlet: import java.io.*; import java.sql.*; impor ...

javahtmlservlets

Is your browser tab failing to display the complete URL?

Encountering a strange issue while working on my current website project: When you click on "about," it does take you to the correct page, but upon refreshing the page, it redirects back to the home page. The same scenario is happening with other pages as ...

htmlcss

CSS Image Placement

If I have an image with a width of 2000px, where the snazzy design aspect is located about 600px in and spans about 900px. My goal is to use this image as the background for a website, ensuring that the snazzy design remains centered even when stretching t ...

css

Modifying the .textcontent attribute to showcase an image using JavaScript

I am working on a website and I want to change editButton.textContent = 'Edit'; so that it displays an image instead of text. var editButton = document.createElement('button'); editButton.textContent = 'Edit'; After exploring ...

javascripthtmlcss

Load HTML content without having to refresh the page

I'm struggling to decide whether I should have the html hidden before it is loaded or pulled from another source. My goal is to display a form on one page and dynamic content on other pages. The form data needs to be saved in mongo db, and when the p ...

ajaxdjangohtmlmongodbbackbone.js

Dynamically injecting a JavaScript script within a Vue.js application

Is there a way to dynamically load a JavaScript script within a Vue.js application? One approach is as follows: <script async v-bind:src="srcUrl"></script> <!--<script async src="https://cse.google.com/cse.js?cx=007968012720720263530:10 ...

javascripthtmlvue.js

designing items in various color palettes

section { background-color:#d5ecf2; width:1024px; height:200px; margin: 0 auto; } .sectiontext { float:right; height:180px; width:720px; margin:10px; } <section> <div class="sectiontext"> <h3>GDS 114.01: HTML and Javascript</h3 ...

htmlcssarticle

A guide on how to efficiently retrieve all images stored in a specific directory

I attempted to showcase all the images from a single directory using jQuery, but unfortunately it is not functioning as expected. My folder setup includes an 'images' folder and a 'js' folder. I followed this question on Stack Overflow ...

javascriptjqueryhtml

Creating a set width for the input-group-append division in Bootstrap 4

I am currently utilizing the power of Bootstrap 4's input group feature to position an icon next to an input field. My goal is to set a fixed width of 40px for the div containing the input-group-append (which houses the icon). According to the offici ...

csstwitter-bootstrapflexboxbootstrap-4

Achieving automatic checkbox selection in Angular 6 through passing a value from one component to another

My page named second.html contains the following code: <div class="col-lg-4 col-md-4 col-sm-4"> <input type="checkbox" class="checkmark" name="nond" [checked]="r=='true'" (change)="nond($event, check)"> ...

htmlangularcheckboxangular6