フレックスボックスを使用すると、コンテナ全体で画像のオーバーフローが発生する

Question

imgをコンテナの外にオーバーフローさせないようにするには、どのようにして<div class="display">を完成させてください。

フレックスボックスで動作するはずです。

ご覧のとおり、このスニペットでは1つの外側に3つの画像が表示され、正しくは1つのボックスには表示されません。

.display { 
 
    min-width: 500px; 
 
    max-width: 500px; 
 
} 
 

 
.scenery { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.scenery_1 { 
 
    display: flex; 
 
} 
 

 
.scenery_2 { 
 
    display: flex; 
 
}

<div class="display"> 
 
<div class="scenery"> 
 
    <div class="scenery_1"> 
 
    <img src="https://s-media-cache-ak0.pinimg.com/736x/02/e1/52/02e1528600a592817fbfa1c67158c13f.jpg" alt="display"> 
 
    <img src="https://s-media-cache-ak0.pinimg.com/736x/02/e1/52/02e1528600a592817fbfa1c67158c13f.jpg" alt="display"> 
 
    </div> 
 
    <div class="scenery_2"> 
 
    <img src="https://s-media-cache-ak0.pinimg.com/736x/02/e1/52/02e1528600a592817fbfa1c67158c13f.jpg" alt="display"> 
 
    <img src="https://s-media-cache-ak0.pinimg.com/736x/02/e1/52/02e1528600a592817fbfa1c67158c13f.jpg" alt="display"> 
 
    <img src="https://s-media-cache-ak0.pinimg.com/736x/02/e1/52/02e1528600a592817fbfa1c67158c13f.jpg" alt="display"> 
 
    </div> 
 
</div> 
 
</div>

Answer 1

あなたがdisplay: flexを使っている理由は、私はわからないんだけど、これは動作します：ここに細かい作業

.display { 
 
    min-width: 500px; 
 
    max-width: 100%; 
 
    display: block; /* Add this, remove everything else*/ 
 
}

<div class="display"> 
 
    <div class="scenery"> 
 
    <div class="scenery_1"> 
 
     <img src="https://s-media-cache-ak0.pinimg.com/736x/02/e1/52/02e1528600a592817fbfa1c67158c13f.jpg" alt="display"> 
 
     <img src="https://s-media-cache-ak0.pinimg.com/736x/02/e1/52/02e1528600a592817fbfa1c67158c13f.jpg" alt="display"> 
 
    </div> 
 
    <div class="scenery_2"> 
 
     <img src="https://s-media-cache-ak0.pinimg.com/736x/02/e1/52/02e1528600a592817fbfa1c67158c13f.jpg" alt="display"> 
 
     <img src="https://s-media-cache-ak0.pinimg.com/736x/02/e1/52/02e1528600a592817fbfa1c67158c13f.jpg" alt="display"> 
 
     <img src="https://s-media-cache-ak0.pinimg.com/736x/02/e1/52/02e1528600a592817fbfa1c67158c13f.jpg" alt="display"> 
 
    </div> 
 
    </div> 
 
</div>