make fluid images with flex box css3 : I have created a showcase section where in I have used flex box 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 JS fiddle 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.

Help would be appreciated, thanks in advance!