CODEWITHSUNDEEP
htmlcssflexboxinternet-explorer-11
Xegara
Xegara

Reputation: 131

max-width of image not working in flexbox for IE 11 but works on google chrome

I'm creating a 2 by 2 grid layout using flexbox where the first column items are merged together as shown below:

enter image description here

This works in Google Chrome without a problem. The image can grow until the maximum remaining width allocated by the flexbox. However, it does not work in IE11. The image stretches its container box and I've been googling and trying different solutions to no avail. It seems like my case is a little different from other similar questions.

Here is what it looks like in IE: enter image description here

Can you help me spot the problem? I've provided a plunker where you can try 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

Upvotes: 1

Views: 1376

Answers (1)

Deepak-MSFT
Deepak-MSFT

Reputation: 11335

IE browser has some issues with Flex. It is not able to calculate the values properly with flex.

(1) I suggest you replace max-width with width in .detail img class.

(2) I suggest you replace flex: 1 0 0; with flex: 0 0 auto; in .detail class.

Edit:-

Added img tag inside one extra div solved the issue as informed by @Xegara. It also worked with max-width For IE 11 browser.

Modified 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>

Output in IE 11:

enter image description here

Upvotes: 2

Related Questions