divを使用せずにフレックスコンテナに画像タグが含まれていないか、または幅が設定されていません

Question

現在、画像はflexコンテナ内の1行に収めています。画像には、それぞれの画像タグをdivで囲むか、min-width: 1%を画像に追加しない限り、画像がコンテナの幅を無視してページをオーバーフローすることに気付きました。

HTML：

<div class="container"> 
    <img src="[url]"> 
    <img src="[url]"> 
    <img src="[url]"> 
</div> 

CSS、ページをオーバーフロー画像：

.container { 
    display: flex; 
    flex-direction: row; 
    height: 300px; 
    margin-bottom: 20px; 
} 

.container img { 
    flex: 1; 
    object-fit: cover; 
} 

オーバーフローの問題を修正：これは正常な動作ですか、私が持っている場合

.container img { 
    flex: 1; 
    min-width: 1%; /* width of images adjust to the parent container */ 
    object-fit: cover; 
} 

私は思っていましたこれを引き起こしているいくつかのCSS。

.container { 
 
    display: flex; 
 
    flex-direction: row; 
 
    height: 300px; 
 
    margin-bottom: 20px; 
 
} 
 

 
.container img { 
 
    flex: 1; 
 
    object-fit: cover; 
 
} 
 

 
.container.fix img { 
 
    flex: 1; 
 
    min-width: 1%; 
 
    object-fit: cover; 
 
}

<div class="container"> 
 
    <img src="https://cdn.pixabay.com/photo/2013/04/06/11/50/image-editing-101040_960_720.jpg" alt=""> 
 
    <img src="https://scontent.fmla3-1.fna.fbcdn.net/v/t1.0-9/12140762_1159067420823544_4471328164031495581_n.jpg?oh=e9255c0340cca64e7f51bb114bc25f9c&oe=5AC9097D" alt=""> 
 
    <img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider1.jpg" alt=""> 
 
</div> 
 

 
<div class="container fix"> 
 
    <img src="https://cdn.pixabay.com/photo/2013/04/06/11/50/image-editing-101040_960_720.jpg" alt=""> 
 
    <img src="https://scontent.fmla3-1.fna.fbcdn.net/v/t1.0-9/12140762_1159067420823544_4471328164031495581_n.jpg?oh=e9255c0340cca64e7f51bb114bc25f9c&oe=5AC9097D" alt=""> 
 
    <img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider1.jpg" alt=""> 
 
</div>

Answer 1

.container { 
 
    display: flex; 
 
    flex-direction: row; 
 
    height: 300px; 
 
    margin-bottom: 0px; 
 
} 
 

 
.container img { 
 
    flex: 2; 
 
    object-fit: cover; 
 
} 
 

 
.container.fix img { 
 
    flex: 2; 
 
    min-width: 1%; 
 
    object-fit: cover; 
 
}

<div class="container"> 
 
    <img src="https://cdn.pixabay.com/photo/2013/04/06/11/50/image-editing-101040_960_720.jpg" alt=""> 
 
    <img src="https://scontent.fmla3-1.fna.fbcdn.net/v/t1.0-9/12140762_1159067420823544_4471328164031495581_n.jpg?oh=e9255c0340cca64e7f51bb114bc25f9c&oe=5AC9097D" alt=""> 
 
    <img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider1.jpg" alt=""> 
 
</div> 
 

 
<div class="container fix"> 
 
    <img src="https://cdn.pixabay.com/photo/2013/04/06/11/50/image-editing-101040_960_720.jpg" alt=""> 
 
    <img src="https://scontent.fmla3-1.fna.fbcdn.net/v/t1.0-9/12140762_1159067420823544_4471328164031495581_n.jpg?oh=e9255c0340cca64e7f51bb114bc25f9c&oe=5AC9097D" alt=""> 
 
    <img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider1.jpg" alt=""> 
 
</div>