画像の最大幅はIE11のflexboxでは機能しませんが、GoogleChromeでは機能します

debugcn 投稿 Dev

ゼガラ

以下に示すように、最初の列の項目がマージされるflexboxを使用して2 x2のグリッドレイアウトを作成しています。

これはGoogleChromeで問題なく機能します。画像は、フレックスボックスによって割り当てられた残りの最大幅まで拡大できます。ただし、IE11では機能しません。画像はコンテナボックスを引き伸ばしており、私はグーグルでさまざまな解決策を試してきましたが、役に立ちませんでした。私の場合は他の同様の質問とは少し違うようです。

IEでの表示は次のとおりです。

問題を見つけるのを手伝ってもらえますか？私はあなたがあなたの解決策を試すことができるプランカーを提供しました。

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

Deepak-MSFT

IEブラウザにはFlexに関するいくつかの問題があります。フレックスでは値を正しく計算できません。

（1）.detailimgクラスでmax-widthをwidthに置き換えることをお勧めします。

（2）flexを置き換えることをお勧めします：1 0 0; フレックス：0 0自動; で.detailクラス。

編集：-

@Xegaraからの通知に従って、1つの追加div内にimgタグを追加すると、問題が解決しました。また、IE11ブラウザーの最大幅でも機能しました。

変更されたコード：

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

IE 11での出力：