Why are my images overflowing the window with flexbox? - html

Question

I have created a showcase section where in I have used flexbox to align images to the right. However when I shrink the size of the window, the images go out of the window. I am looking for something like this: http://jsfiddle.net/xLc2Le0k/15/
Here is the snippet for HTML:
<div class="showcase shadow">
<div id="places">
<p class="category">Places</p>
<div>
<img src="img\Taj Hotel.png" alt="">
</div>
<div>
<img src="img\Gateway of India.png" alt="">
</div>
<div>
<img src="img\Shack at Goa.png" alt="">
</div>
</div>
<p class="more-text">View more...</p>
</div>
Here is the snippet for SCSS:
.showcase {
width: 100%;
margin-top: 5%;
display: inline-block;
#places {
width: 100%;
display: flex;
div:nth-of-type(1) {
align-self: flex-end;
}
div {
margin-left: 0.5%;
}
}
}
Here is the link for the live web page: https://swizzx.github.io/Photography-Portfolio/
Just a heads up, I have tried setting the width of the parent and the element to 100%, when I do so, it shrinks but does not work as how I want it to like in the JSFiddle provided above. On the contrary setting the width to 100% makes the first image equal to the size of the others which I don't want.

Answer 1

You should add below css property to the flex container. It wraps elements automatically to the next line when you shrink the window.
flex-wrap: wrap;

Answer 2

One thing you are missing in your code is applying 100% width to your img tag. Give img 100% width and it will work the same way you want.
#places div img {
width: 100%;
}

Answer 3

Actually it was the paragraph in the #places div that was causing the images to shrink much more than required. Figured out that had to place it out of the #places div and inside the .showcase div like :
<div class="showcase shadow">
<p class="category">Places</p> // like this
<div id="places">
<div>
<img src="img\Taj Hotel.png" alt="">
</div>
<div>
<img src="img\Gateway of India.png" alt="">
</div>
<div>
<img src="img\Shack at Goa.png" alt="">
</div>
</div>
<p class="more-text">View more...</p>
</div>
and than setting the width of the images to 100% like gagan mentioned :
.showcase {
width: 100%;
margin-top: 5%;
display: inline-block;
#places {
width: 100%;
display: flex;
justify-content: flex-end;
div:nth-of-type(1) {
align-self: flex-end;
}
div {
margin-left: 0.5%;
img {
width: 100%; //width to 100%
}
}
}
}